三言兩語之簡單上手sass

背景：

  初次接手公司的項目,雖然以前草草的看過一些sass的基礎知識，可是由於久未征戰，知識也早已隨風飄散，如今小複習一下記下一些常識中的重點。。sass是使用ruby寫的，因此使用前請先確保本身的機子中有了ruby的開發環境，在cmd下使用 ruby -v 命令能夠查看當前的ruby版本，安裝Ruby後咱們要安裝sass，按住鍵盤win+R，輸入ruby打開命令行，輸入gem install sass安裝sass便可，如圖所示：

 

須要注意的是：只要咱們的項目中用到了sass都應該將環境配置全了，以防往後的其餘依賴出現問題。

 

簡介及概述：

  sass是css的 預處理工具，當咱們的css代碼量很大的時候能夠簡化咱們的開發方便後續的維護。什麼是預處理工具，簡單的理解就是在產生真正css代碼 以前 要作的工做，他融入了一些高級語言的特性，提升了咱們css的書寫效率,且sass也支持css3。

 

  還記得c語言中的預處理嘛？c語言中預處理的類型包括不少，其中最不爲人知的是「宏定義」，宏定義的做用就是定義一個預設好的常量，而後將代碼中出現這個常量的部分，所有使用這個常量預設好的值替換，例如 #define A 5 ，他的意思就是將下文代碼中出現的全部A直接替換爲5，而這些工做都是在代碼編譯之前就要進行的，因此宏定義爲預處理的一種。

 

      回到咱們的上文，咱們知道css的代碼都要寫在文件後綴爲css的文件中才能進行編譯解析，既然sass是預編譯工具，可想而知sass的使用必定就會在產生css以前了，嗯，確實是這樣的，sass最經常使用的書寫方式有兩種，他們分別對應着不一樣的後綴名 sass、scss,前者沿襲了ruby、python之類語言的語法，使用空格做爲語言語法的一部分，然後者更加貼近於廣大的前端愛好者，使用咱們css中最多見到的花括號做爲語法支持，對於同一段代碼區別以下

sass寫法: 使用空格做爲語法的一部分，本應該是一個空格的地方若出現兩個空格則語法報錯,且不須要分號結尾    
div     
 width:100px   
 height:100px

scss寫法：一如咱們寫css通常
div{
    width:100px;   
    height:100px;
}   

須要注意的是兩種語法不可在同一文件中混寫，可是能夠利用工具進行相互的轉換。

 

 

經常使用技巧：

 

1.類名嵌套

css代碼：   
.div1 .div2{
    background-color:red;
}

sass代碼：
.div1{
    .div2{
        background-color:red;
    }
}   
能夠看到sass使類名的嵌套更加清晰，類名的權重也會一目瞭然

 

2.變量

使用$定義一個變量
$mainColor:red;

css寫法：  
.div1 .div2{
    background-color:red;
}

sass寫法：
 .div1{
    .div2{
        background-color:$mainColor;
    }
} 
更加方便維護和修改

 

3.僞類/僞元素寫法

這個寫法我當時猛的一看，確實不知道，還納悶爲何這樣用，後來一查資料，原來只是僞元素的寫法而已   

css寫法：   
.clearfix::before{
    content:"";
    ...
}

sass寫法：
.clearfix{
    &:before{  //&稱爲父元素選擇器，若是不加則表明選中.clearfix類下全部的元素
        content:"";
        ...
    }
}

這裏有個小的注意點就是僞類和僞元素的區別：僞元素是css3中才出現的概念，用兩個::來表示，僞類意爲向某些選擇器添加特殊的效果，而僞元素意爲將某些特殊的效果添加到某些選擇器上，常見的僞類如link、visited、hover、active這裏值得一提的是你們必定要注意個人書寫順序，當這四個僞類要同時出現並使用的時候，他的書寫順序必須與我這個保持一致，不然無效，怎麼記呢？lv包聽過嗎？他好很差？嗯！lvha。。開頭字母記住整個單詞也就差很少了。經常使用的僞元素就不用說了如after、before、first-letter、first-line等，因此你們必定要知道兩點，第一什麼時候寫幾個分號，第二當同時使用多個僞類時的順序問題。

 

4.代碼重用之繼承

  看到這裏，你們必定要想到上面寫到的第2點，變量的定義是爲了某個值的複用，想要複用一大段的代碼該怎麼作呢？可使用如今要介紹的繼承咯。sass中的繼承有兩對關鍵字 @mixin/@include和@extend，二者的工做原理也大不相同，@mixin爲定義一個代碼快，@include是將定義好的代碼快引入，而@extend則是將現定義好的的類樣式引入，熟悉c語言的同窗都知道，include是c語言中宏定義的一種，在這裏能夠理解爲同義，至關於代碼拷貝， 因此當咱們的sass解析到這個關鍵字會直接將@mixin中的代碼進行拷貝，而@extend若出如今某個類中則是將當前類名並列到了要繼承的類名中去也就是事例中的b的名字會出如今a中，最終的效果是.a,.b即類a類b都會有這個屬性。繼承是面向對象中的概念，sass中使用@extned關鍵字,意爲拿來主義，簡單的理解爲你父親的有的你就能夠不要本身再有了，直接拿過來用就好,在咱們sass中經常使用於重複代碼引用，前天產品給我提了個需求，他說點擊搜索框跳轉到新的搜索頁面進行搜索，新的頁面的搜索框和主頁的搜索框大部分相同只有字體的顏色不一致， 此刻難道我要將兩部分css都重寫一遍？聰明的童鞋想到了，把第一部分寫好的繼承過來，重寫不一樣的便可。

css代碼:
.a{
    background-color:red
    ....
}
.b{
    //假設b也須要背景爲紅色等
    @extend .a;
    font-size:24px;
}

在php中也有include等關鍵字，前端同窗能夠查閱相關資料補充本身的知識，如include和require在php中的不一樣

 

5.註釋

  sass中的註釋有兩種，一種是咱們在css中使用的/**/，一種是//註釋，前者在編碼階段和編譯後的階段都會被保留，然後者只存在於編碼階段，也就是給程序看的咯~

 

6.文件定義

  sass中的文件定義也很簡單，咱們只須要知道一點就能夠，以_開頭的文件名不會被sass編譯器編譯成css文件，因此他有個見名知意的名字叫 局部文件 而以_下開頭的文件中一般會被用做定義一些所有變量，如字體大小顏色等，至少我這個項目是這樣作的，如_var.scss文件他的存在形式只會有一種，就是scss後綴結尾的文件，而aa.scss這樣的文件，通過sass編譯器就會被編譯爲css文件，咱們知道瀏覽器的渲染引擎只認css文件。不過此刻問題又來了，那_var.scss該怎麼使用呢？

 

7.sass中的import和css中import的區別

  _var.scss文件既然不會被編譯爲css文件，那就意味着他沒有辦法被瀏覽器解析，上文也提到過一般使用他來聲明一些變量，那麼這些變量將怎麼被主文件引用呢？這裏咱們依舊使用的是css中就有的一個關鍵字@import指令，只是sass中的對這個指令進行的了必定的加強，這裏須要你們明確一點，在sass中 *_var和var表明同一個文件* ，因此當引入_var這個文件的時候，只須要寫var便可，sass中使用@import引入sass文件的時候只須要寫上文件名而不須要後綴，這點就和node中使用require引入一個模塊是相似的，例如@import "var",這裏你們可能會有疑問怎麼使用這個指令來引入曾經的css文件，其實咱們上邊已經說過@import是sass對css中同名指令的加強，因此當sass判斷到@import指令後面出現後綴名、url函數、http等關鍵字時就會認爲你使用的是css中原生的@import指令。

 

關於css中@import的最佳實踐，在性能優化方面並不提倡你們在css中常用@import指令，咱們知道當瀏覽器引擎拿到一個網頁文件的時候是先生成dom樹，其次構建渲染樹進行渲染，而@import是內嵌在css中的，也就是他會比link標籤中的css代碼晚一步執行，因此使用這個指令會形成頁面的卡頓留白。

 

8.屬性的連寫拆分

  在css中有個稱之爲屬性連寫的概念，如padding：5px，其實咱們也能夠分寫成padding-left、padding-right等，可見這樣分寫冗餘了一個padding關鍵字，那在sass中要怎樣等價替換呢？

css代碼
.a{
    padding-left:2px;
    padding-right:2px;
}

sass代碼
.a{
    padding{
        left:2px;
        right:2px;
    }
}

 

9.其餘

  以上知識sass中最爲簡單經常使用的一部分，也是做爲一個剛入門的新手必然要掌握的一部份內容，關於sass的其餘技巧如能夠進行帶單位的計算、@if、@at-root等指令如若須要你們能夠查閱相關的資料加以補充。

 

10.後處理

　　預處理是在生成css代碼以前，然後處理包括的內容則是代碼的壓縮混淆等，這就能夠構成一個完整的css工做流了。