SASS學習

SASS

     1.什麼是SASS

        1.SASS是最成熟、最穩定關聯強大而且專業的css擴展語言。

        2.SASS是css的擴展語言，容許使用變量嵌入規則，mixin,imports以及更多的語法來使css更強大，更易於組織速度更快，SASS就是css的預編譯語言。

         3.SCSS & SASS

            這兩個語法的不一樣之處。

             SASS:它的屬性用了縮進來進行代碼塊的區分，相似於python的腳本語言，但這種語法和咱們現階段的css語法是不兼容的，後期的版本就將語法改爲了SCSS。

                 #main 

                    color:blue 

                    fontsize:3em

             SCSS:#main{color:blue;fontsize:3em;}

     2.SASS的預處理

        對瀏覽器來講它只認識HTML、css和js，因此須要一個工具將咱們的SASS這種既支持編程，又支持函數循環的這種語法，他能讓瀏覽器識別，這就須要編譯。

         1.koala

            監視文件系統指定的路徑項，這個SASS文件是否有改變，而且給他編譯，這種工具對咱們通常人來講還不是特別方便，能夠考慮用下面這兩種方式。

         2.Ruby插件和webstorm

            RUBY不要安裝到中文路徑,我用的vscode，因此不用webstorm了

         3.gulp

            通常用於導入的css文件用_開頭命名，好比_common.scss

    3.SASS語法 

         mixin

            1變量

                 $fontSize:20px;

             2.嵌套

                .div{
                    font-size: $fontSize;
                    .box{
                        height: 100px;width: 100px;
                    }
                    .img{
                        display:block;
                    }
                }

 

             3.導入

                  @import "_common.scss";//引用_common.scss模塊，vscode裏面使用。 

             4.mixin

                @mixin font($family,$size,$weight) {
                    font-family: $family;
                    font-size: $size;
                    font-weight: $weight;
                }
                @mixin  transition($prop,$time) {//能夠將瀏覽器兼容性問題都放到函數裏面
                    -moz-transition: $prop,$time;
                    -o-transition: $prop,$time;
                    -webkit-transition: $prop,$time;
                    transition: $prop,$time;
                }
                a{
                    @include font('\5fae\8f6f\96c5\9ed1',30px,bold);//"微軟雅黑"unicode碼
                }
                div{
                    @include transition(all,.5s)
                }

 

             5.擴展

                若是一個元素方法過多，也會形成維護問題，這裏用到擴展方法,將一些共有的屬性都繼承到一個類中

                    .message{
                        height: 100px;
                        width: 50px;
                    }
                    .boxmessage{
                        @extend .message;
                    }

 

             6.funtion

                在移動端若是使用px的話，是一種很是麻煩的方式，這裏在scss文件中能夠設定咱們的設計稿的寬度能夠分紅多少個而言，好比10份

                    $count : 10;
                    $designWidth:640px;
                    @function px2em($px){
                        @return $px * $count / $designWidth *1em;//乘以1em讓結果帶上單位
                    }
                    .div2{
                        height: px2em(100px);
                        width: px2em(100px);
                    }

 

             7.expression

                scss支持加減乘除，還能夠循環

                    @mixin transform($rotateY,$i) {
                        transform: $rotateY($i);
                        -moz-transform: $rotateY($i);
                        -ms-transform: $rotateY($i);
                        -o-transform: $rotateY($i);
                        -webkit-transform: $rotateY($i);
                    }
                    @for $i from 1 through 15 {
                    .box div:nth-of-type(#{$i}){//讓.box下面的15個div都逐漸旋轉，這裏注意傳入參數的格式#{$i}
                        @include transform(rotate,$i * 30deg);
                    }
                    //布爾和if判斷語句
                    $someEvent:false;
                    @if $someEvent{
                        p{
                            background: black;
                            color: black;
                        }
                    }@else{
                        p{
                            background: red;
                            color: blue;
                        }
                    }
}