sass 语法

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

/*定义变量*/$fontStack: Helvetica,sans-serif;$primaryColor:#333;body{  font-family: $fontStack;  color: $primaryColor;}/*嵌套表示层级*/nav{  ul{margin: 0;padding: 0;list-style: none;}  li{display: inline-block;}  a{display: block;padding: 6px 12px;text-decoration: none;}}/*导入*/@import ‘reset‘;body{  font-size: 100%; Helvetica,sans-serif;  background-color: #ec971f;}

/*mixin 定义一些代码片段且可传参，方便日后调用*/@mixin box-sizing($sizing){  -webkit-box-sizing: $sizing;  -moz-box-sizing: $sizing;  box-sizing: $sizing;}.box-border{  border:1px solid #ccc;  @include box-sizing(border-box);}/*扩展/继承*/.message{  border: 1px solid darkblue;  padding: 10px;  color: #333;}.success{  @extend  .message;  border-color: red;}.error{  @extend .message;  border-color:red;}.warning{  @extend .message;  border-color:yellow;}/*sass 中集成了大量的颜色函数，让变换颜色更加简单*/$linkColor:#08c;a{  text-decoration: none;  color:$linkColor;  &:hover{    color:darken($linkColor,10%);  }}