關於SASS工具

SASS

SASS是一種CSS的開發工具，它具備很強大的功能。衆所周知，css不是一種編程語言，而是一種網頁開發工具，不具備變量。可是SASS能夠設置變量，能夠有函數，是一種很強大的網頁開發工具。

--------------------------------------
基本用法

SASS容許使用變量，全部變量以$開頭。如：

        $color : red;         
        div {     
            color : $color;         
        }

若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

        $side : left;         
        div {         
            border-#{$side}-radius: 5px;         
        }

SASS容許在代碼中使用算式：

        body {         
            width: (14px/2);         
            height: 50px + 100px;                  
        }

SASS容許選擇器嵌套。如：

        div h1 {         
            color : red;     
        }
能夠寫成：
        div {         
            h1 {         
                color:red;         
            }         
        }

屬性也能夠嵌套，好比border-color屬性，能夠寫成：

        p {         
            border: {     
                color: red;         
            }         
        }
        //上面代碼也等於下面
        p {
            border-color:red;
        }


注意，屬性嵌套時，border後面必須加上冒號。

在嵌套的代碼塊內，&能夠表明父元素。好比a:hover僞類，能夠寫成：
        a {
            &:hover { color: red; }         
        }

mixin混合變量：

能夠指定參數和變量.以下面代碼塊:

        @mixin box($width:10px,$height) {         
            width: $width;         
            height: $height;         
        }

在後面引用這個代碼塊時，能夠使用@include box的方法。如：
        div{
            @include box(10px,10px);
        }

        //在傳參數的時候，若是代碼塊裏有默認的值，咱們能夠不傳這個參數。如：
        div{
            @include box(10px);
        }