sass结尾的文件有着更严格的格式要求，scss文件更贴近原生css

比如sass文件

CSS Code 复制内容到剪贴板 #main        color :  #fff      &-sidebar         border :  1px   solid   

等同于scss的

CSS Code 复制内容到剪贴板 #main {       color :  black ;      &-sidebar {  border :  1px   solid ; }    }  

编译后为

其中代表父级元素的& 只可出现在头部，否则解析不出来。
嵌套属性

CSS Code 复制内容到剪贴板 .funky {       font : {        family:  fantasy ;         size : 30em;        weight:  bold ;      }    }  

编译为

CSS Code 复制内容到剪贴板 .funky {       font-family :  fantasy ;       font-size : 30em;       font-weight :  bold ; }  

这个在一些复杂的css3属性上用处比较大，比如animate
字符串内插

使用#{}作为选择器变量

CSS Code 复制内容到剪贴板 $name: foo;    $ attr :  border ;    p.#{$name} {      #{$ attr }- color :  blue ;    }       p {      $ font-size :  12px ;      $ line-height :  30px ;       font : #{$ font-size }/#{$ line-height };    }  

第二个例子如果不用字面量则12除30
运算符

CSS Code 复制内容到剪贴板 p {       width : 1in    8pt ;    }  

单位如果可以转换，会被自动转换
编译为：

CSS Code 复制内容到剪贴板 p {       width : 1.111in; }       p {       font :  10px / 8px ;             // Plain CSS, no division      $ width :  1000px ;       width : $ width /2;            // Uses a variable, does division       width : round(1.5)/2;        // Uses a function, does division       height : ( 500px /2);          // Uses parentheses, does division       margin-left :  5px     8px / 2px ; // Uses  , does division    }  

直接字面量，变量使用，函数，括号，优先级
以上编译为

CSS Code 复制内容到剪贴板 p {       font :  10px / 8px ;       width :  500px ;       height :  250px ;       margin-left :  9px ;     }  

颜色：

CSS Code 复制内容到剪贴板 p {       color :  #010203     #040506 ;//相加 rbg三位分别相加       color :  #010203  * 2;//相乘       color : rgba(255, 0, 0, 0.75)   rgba(0, 255, 0, 0.75);//带alpha通道的叠加          color : opacify($translucent- red , 0.3);//控制透明的函数，加强非透明       background-color : transparentize($translucent- red , 0.25);  //控制透明的函数，加强透明    }  

默认变量：

CSS Code 复制内容到剪贴板 $content: "First content";    $ content :  "Second content?"  ! default ;    $new_content:  "First time reference"  ! default ;       #main  {       content : $ content ;      new- content : $new_content;    }  

!default 如变量被赋值使用之前的赋值，没被赋值，赋值