CSS預處理器Sass -- Sass、compass初識及其安裝(1)

前言：爲了在項目中更高效的編寫出高質量的、兼容性更強的CSS代碼，一般咱們會在項目中使用CSS預處理器，我的更習慣使用Sass。

1.CSS預處理器

　　<1>什麼是CSS預處理器？

　　　　CSS預處理器是新定義的一種以CSS爲目標文件語言，開發時只須要使用這種語言進行編碼工做，預處理器一般實現瀏覽器兼容、變量、結構體等功能，代碼更易維護。

       <2>爲何須要CSS預處理器？

　　　　對於小型項目、或樣式簡單的項目，能夠直接編寫CSS代碼。可是對於大型項目，牽扯不少樣式複雜的頁面和模塊，若是使用原生CSS須要分別對不一樣的頁面編寫CSS文件達不到複用，會很麻煩並且不易維護。若是使用預處理器，能夠利用變量、函數、繼承等功能方便的實現CSS的編寫。

2.預處理器之Sass

　　<1>什麼是Sass？

　　　　Sass是CSS的一種預處理器，是一種相似編程語言的源語言，目的是解決補充CSS自己的不足。

　　<2>我爲何選擇Sass?

　　　　變量：使用sass中的變量能夠實現更增強大的功能。

　　　　顏色：使用RGB或RGBA實現顏色值的自動裝潢

　　　　嵌套：嵌套規則更加直觀清晰，與html嵌套相對應。

　　　　媒體查詢：media query書寫更加簡單。

　　　　CSS壓縮：實現CSS的自動壓縮。

　　<3>.Sass和.Scss兩種文件格式的區別?

　　　　.Sass：.sass是Sass最原始的文件格式，爲了配置haml而設計，遵循縮進式的代碼風格(不使用大括號包裹，末尾不添加分號;)。

　　　　例子：sass

    body
        background-color: black

　　　　不使大括號包裹，末尾不須要書寫分號結束。

　　　　.Scss：使第三代開始，在保留縮進式風格的基礎上，向下兼容普通的CSS代碼格式，大括號進行包裹，末尾分號結束。

　　　　例子：scss

    body {
        background-color: black;
    }

　　　使用大括號包裹，同時結尾使用分號，書寫格式更相似原生CSS。

3.SASS類庫之Compass

　　<1>什麼是compass？

　　　　Compass更像是sass的一個基礎類庫，是一個很是豐富的樣式框架，包括大量定義好的mixin，函數，以及對SASS的擴展。

       <2>compass的五大模塊？

　　　　reset模塊：重置元素默認樣式的影響。

　　　　CSS3模塊：支持CSS3引入的新屬性。

　　　　layout模塊：支持頁面的柵格化佈局。

　　　　typograph模塊：主要負責板式的填充。

　　　　utilities模塊：類庫自己提供的工具類。

 

4.SASS與Compass的安裝

　　我使用vsCode編輯器，安裝了Live Sass Compile插件就能幫我實時的完成Sass文件的編譯，但這裏咱們依然學習下Sass傳統的安裝。　　

　　<1>安裝Ruby？

　　　　CSass是用Ruby開發的，因此咱們安裝Sass和Compass的前提是先安裝Ruby。

　　　　第一步：進入Ruby的官網，https://rubyinstaller.org/downloads/

　　　　第二步：下載圖示安裝包

　　　　

　　　　第三步：正常安裝軟件，一路next，等待安裝完成。

　　　　第四步：在命令行中運行Ruby -v，若是出現以下表示成功

　　　　

　　　　　　　　若是出現命令找不到的提示，那麼咱們就須要配置環境變量。

       <2>Sass和Compass的安裝？

　　　　因爲Compass是依賴於Sass的，咱們只需安裝Compass就Sass也就會安裝成功。

　　　　命令行中運行：gem install compass

　　　　注意：這裏下載可能會失敗，覺得gem默認會從Ruby官方庫下載compass，不少外國資源一般是被牆了的，這時候須要切換下載源。

　　　　第一步：gem source查看當前資源路徑

　　　　

　　　　第二步：gem source -r 「資源路徑」刪除當前資源路徑

　　　　

　　　　第三步：gem source -a 「資源路徑」添加新的資源路徑，這裏咱們添加淘寶的ruby鏡像地址

　　　　

 　　　　第四步：而後再執行gem install compass，而後運行sass -v查看是否安裝成功

　　　　

　　　　這裏安裝成功的是3.4.25版本。

 

　　總結：本節咱們初步認識Sass、Compass的做用和功能，而後完成Sass、compass開發環境的搭建，下節開始學習Sass、compass的使用。