SASS

1、安装

　　http://www.cnblogs.com/slogeor/p/3843423.html

2、参考

　　http://www.ruanyifeng.com/blog/2012/06/sass.html

　　http://www.w3cplus.com/sassguide/syntax.html

3、特别注意

　　导入

　　　　sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，

              而是以@import方式存在。

　　默认变量

　　　　sass的默认变量仅需要在值后面加上!default即可。 $defalutLeft: 20px !default;

　　　　sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可，必须　　　　在之前进行覆盖$defalutLeft: 30px; $defalutLeft: 20px !default;

　　　　特殊变量：如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

　　　　

    $borderDefault: top !default;
        .div{
　　　　　　border-#{$borderDefault}:1px solid #aaa;
　　　　}

    //sass
    $borderDefault: top !default;
        .div{
            border-#{$borderDefault}:1px solid #aaa;
       }
        //css
       .div {
　　　　　 border-top: 1px solid #aaa; 
　　　　}        

　　　　多值变量：多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

　　　　

　　　　//list
　　　　$linkColor: #08c #333 !default;
　　　　a{
　　　　　 color:nth($linkColor,1);
　　　　　 &:hover{
　　　　　　　　 color:nth($linkColor,2);
　　　　　　}
　　　　}

　　　　//map
　　　　$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
　　　　@each $header, $size in $headings {
　　　　　#{$header} {
　　　　　　　font-size: $size;
　　　　 }
　　　　}
　　　//css
　　　h1 {font-size: 2em; }
　　　h2 {font-size: 1.5em; }
　　　h3 {font-size: 1.2em; }

　　　　目前变量机制：在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

　　　　

 　//scss
　$fontSize: 12px;
　body{
　　$fontSize: 14px;
　　font-size:$fontSize;
　}
　
　p{
　　 font-size:$fontSize;
　　}
　//css
　body {font-size: 14px; }
　p {font-size: 14px; }