//声明变量,并使用

$hightlight-color:red;
header{
      $width:100px;
      width:$width;
      color:$hightlight-color;
  } 

//在一个变量中可以使用另一种变量

$hightlight-color:red;
$hightlight-border:1px $hightlight-color solid;
.selected{
border: $hightlight-border;
}

//混入,用@include 指令引入，可以先为参数设置默认值

@mixin horizontal-list($spacing:10px){
      li{
          float: left;
          margin-right: $spacing;
     }
  }
 #header ul.nav{
   @include horizontal-list(20px);
 }

//嵌套sass编写,#content会一层一层与子标签进行解析，如首先解析为#content article{};#content aside{};然后解析为#content article h1{};#content article p;#article aside{};

#content{
 article{
   h1{color:#333};
   p{margin-bottom: 1em};
 }
aside{background: #cccccc}
 }

//父选择器—-&, 例如要匹配a自身，这时需要用&来代替a本身

article a{
 color:blue;
 &:hover{color:red;}
}

//一组选择器的嵌套

//1
.container{
  h1,h2,h3{
    margin-bottom: 1em;
  }
}
//2
nav,aside{
  a{
    color:red;
  }
}

//子选择器和兄弟选择器

article{
  ~ article{border: 1px solid #ccc;}
  > section{color: blue;}
  dl>{
    dt{color: black}
    dd{color: blue}
  }
  nav + &{margin-bottom: 0;}
}

//属性嵌套

nav{
  border: {
    style: solid;
    width: 1px;
    color: #cccccc;
  };
}