sass學習研究

這篇文章是算是前兩天學習sass的一個摘要和總結吧，簡單記載下。但願對你們有所幫助

對於什麼是sass，我想如今你們可能都有所瞭解了。其實就是css的一種開發工具，或者也能夠說是將css編程化。其實和less是有很大的類似點的。或者說幾乎都是相同的。可是對於這兩種的高級用法，其實我的更加的偏向於sass！

關於sass的安裝以及編譯之類的這個東西上網一查一大把的就很少說了

我這裏是用koala編譯的。

下面簡單的總結下sass的幾個特色吧。

一、變量：

sass中容許使用變量，在sass中變量都是以$開頭的。

$blue:#249804;

div{

color:$blue;

}

若是須要將變量嵌入在字符串中則就必須寫在#{}中

相似於我在匯聯易中自定義的柵格寬度的sass寫法：

@mixin colWidth($value:20%) {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 $value;

    -moz-box-flex: 0;

    -moz-flex: 0 0 $value;

    -ms-flex: 0 0 $value;

    flex: 0 0 $value;

}

$i:1;

@while $i<=100{

    .col-#{$i}{

        @include colWidth($i*1%);

        $i:$i+1;

    }

}

／／這裏用到的Mixin和循環後面會講到。

變量很是的簡單，基本也就這樣。

二、計算功能

這個很是的簡單，舉個例子就能夠了

在上面的例子中也用到了，好比$i*1%；

再好比：margin:(10px+2px);

三、嵌套

這裏的嵌套給個人感受就相似於dom樹的樹狀結構似的。

很簡單，舉個例子就能夠了

.hly{

.expense-type-icon-list {

            box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, .26);

            .scroll {

                float: left;

                .scroll-content-container {

                    width: 35em;

                    padding: 8px 10px;

                    float: left;

                    img {

                        float: left;

                        margin-left: 5px;

                    }

                    img:first-child {

                        margin-left: 0px;

                    }

                }

            }

        }

}

對應的生成出來的css：

        .hly .create-invoice .expense-type-icon-list {

  box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, 0.26); }

  .hly .create-invoice .expense-type-icon-list .scroll {

    float: left; }

    .hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container {

      width: 35em;

      padding: 8px 10px;

      float: left; }

      .hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img {

        float: left;

        margin-left: 5px; }

      .hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img:first-child {

        margin-left: 0px; }

四、繼承

sass容許一個選擇器去繼承另外一個選擇器，好比如今有個class1，

.class1{

border:1px soild #ddd;

}

如今有class2要繼承class1的屬性，則用@extend命令

.class2{

@extend .class1;

font-size:1.5em;

}

五、Mixin

這個能夠理解爲宏定義，angularjs中的指令，在變量的舉例中就有說到了。這裏再具體的說下

這裏咱們經過一個mixin來定義一個代碼塊

仍是拿上面的例子：

@mixin colWidth($value:20%) {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 $value;

    -moz-box-flex: 0;

    -moz-flex: 0 0 $value;

    -ms-flex: 0 0 $value;

    flex: 0 0 $value;

}

用@include來調用它。

div{

@include colWidth(30%);

}

看到這裏你們可能會有個疑問，爲何這裏的mixin中有個參數在裏面？

其實這個也就是Mixin的強大之處了（固然，你也能夠不指定）

當指定了之後，咱們能夠傳入不一樣的值，固然也能夠缺省，當缺省的時候就是默認的指，例如上面的例子就是20%

六、顏色函數

說實話這個我不是很懂，由於基本我以爲是用不到的。簡單從網上找了些例子：

lighten(#cc3, 10%) // #d6d65c

　　darken(#cc3, 10%) // #a3a329

　　grayscale(#cc3) // #808080

　　complement(#cc3) // #33c

你們這個也能夠多查查。

七、插入文件

簡單的一個命令@import

@import("path/fileName.scss");

若是是.css的文件

@import "fileName.css";

八、條件語句

從這裏開始應該能夠說是sass的一些高級的用法了吧

@if能夠用來判斷

div{

@if 1+2 ==3 {border:1px soild #ddd};

@if 3<2 {margin:0 auto};

}

固然，既然存在if，必然少不了else！用法以下：

@if lightness($color) > 30% {

　　　　background-color: #000;

　　} @else {

　　　　background-color: #fff;

　　}

九、循環語句

sass支持for循環，while循環以及each命令

for循環：

@for $i form 1 to 10{

.class-#{i}{

margin-left:#{i}px;

}

}

while循環（一樣是匯聯易中的例子）：

@mixin colWidth($value:20%) {

    -webkit-box-flex: 0;

    -webkit-flex: 0 0 $value;

    -moz-box-flex: 0;

    -moz-flex: 0 0 $value;

    -ms-flex: 0 0 $value;

    flex: 0 0 $value;

}

$i:1;

@while $i<=100{

    .col-#{$i}{

        @include colWidth($i*1%);

        $i:$i+1;

    }

}

each例子：

@each $member in a, b, c, d {

　　　.#{$member} {

　　　　　background-image: url("/image/#{$member}.jpg");

　　　}

　　}

十、自定義函數

固然也是有特殊符號的：@function @return

@function double($i){

@return $i*2;

}

div{

margin:double(2em);

}

最後說一句，在項目中儘可能仍是少用sass的高級用法，由於可能項目跑起來編譯特別慢，甚至會卡在高級用法中編譯不出sass別的樣式

好比我自定的柵格用的Mixin，這個在項目可以很快被編譯，可是配合了while循環就會卡死。後來我是引入koala編譯出來的css文件引入到項目中的～