Sass的安裝使用

1.介紹

1.1 CSS預(yù)處理技術(shù)，及種類介紹

什么是css預(yù)處理技術(shù)

• CSS 預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。
• 通俗的說，“CSS 預(yù)處理器用一種專門的編程語言，進(jìn)行 Web 頁面樣式設(shè)計(jì)，然后再編譯成正常的 CSS 文件，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數(shù)（如變量$main-color）等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。

css預(yù)處理技術(shù)的種類

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

如此之多的 CSS 預(yù)處理器，那么“我應(yīng)該選擇哪種 CSS 預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門話題，各大技術(shù)論壇也是爭論不休。

到目前為止，在眾多優(yōu)秀的 CSS 預(yù)處理器語言中就屬 Sass、LESS 和 Stylus 最優(yōu)秀。

1.2 什么是sass

Sass(Syntactically Awesome StyleSheets)是一種CSS預(yù)處理器(preprocessor)， 是一款強(qiáng)化 CSS 的輔助工具?？梢愿咝У木帉憳邮剑瑫r(shí)實(shí)現(xiàn)變量、嵌套、組合、繼承等編程語言功能。

css是一門非程序式語言，沒有變量、函數(shù)、scope(作用域)等概念。

• CSS需要書寫大量看似沒有邏輯的代碼，冗余度比較高
• 不方便維護(hù)及擴(kuò)展，難以復(fù)用
• css沒有很好的計(jì)算能力
• 非前端工程師往往會因?yàn)槿鄙貱SS編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的CSS代碼

CSS 預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者只要使用這種語言進(jìn)行CSS的編碼工作就可以了。

“用一種專門的編程語言，進(jìn)行 Web 頁面樣式設(shè)計(jì)，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項(xiàng)目使用。”

2.關(guān)于scss和sass

sass是最早出現(xiàn)的css預(yù)處理語言，有著比less更強(qiáng)大的功能。采用Ruby語言編寫。

最初版本采用的是嚴(yán)格縮進(jìn)的風(fēng)格（不帶大括號( {} )和分號( ; )，這一語法也導(dǎo)致一開始，sass并不太為開發(fā)者所接受）。

從 V3 版本開始放棄了縮進(jìn)式的風(fēng)格，并完全兼容普通的css代碼，也因此從第三代開始，sass也被稱為scss。

Sass 3 就是 Scss，是Sassy CSS的簡寫，它是CSS3語法的超集，也就是說所有有效的CSS/CSS3樣式也同樣適合于Sass。

對現(xiàn)代編程來說，sass就是scss，也因此，sass現(xiàn)在的擴(kuò)展名為.scss（如果是舊版本的sass，可能擴(kuò)展名會為.sass）。

3.安裝和命令行編譯

cmd打開本地命令控制窗口，輸入下面字符串然后回車就裝好了。

npm install -g sass 


    

        1
    

編譯.scss文件為.css文件：

Sass使用.scss作為文件后綴名，不能直接在< link >標(biāo)簽里使用，需要編譯為 .css文件。 演示：

1. 建一個html文件，隨便寫個h1標(biāo)簽：

2. 建一個.scss后綴的文件，如input.scss，寫點(diǎn)基本樣式sass的語法：
   

3. 在html文件所在的路徑下打開cmd命令控制符，輸入：

   //單文件轉(zhuǎn)換命令
   sass input.scss:output.css
   
   // 或 sass input.scss output.css 
           
   
   
               
   
                   1
               
   
               
   
                   2
               
   
               
   
                   3
               
   
               
   
                   4
               
   
           
   

   表示把名字為 input.scss 轉(zhuǎn)換成名字為 ouput.css 的文件。
   回車后，接下來發(fā)現(xiàn)就得到了css的文件。

   

使用 : 編譯輸出時(shí)，前后不能有空格，即 : 前緊跟輸入的scss文件，: 后緊跟輸出的css文件。

: 冒號形式的命令，常用于編譯文件夾（中的所有sass文件）的輸入輸出。

css文件內(nèi)容如下，可以看出轉(zhuǎn)換好了：
 
接下來就是老操作了，在HTML里用 < link >標(biāo)簽把css文件引入就行。

4. 但是不可能說寫一句.scss語句就轉(zhuǎn)換一次，太麻煩，所以可以自動轉(zhuǎn)換，當(dāng)我在.scss里寫一句，.css就自動生成一句。在cmd輸入以下：

   sass --watch input.scss:ouput.css 
           
   
   
               
   
                   1
               
   
           
   

   表示監(jiān)視變化，當(dāng)input.scss一變化，output.css就變化

空格和冒號對應(yīng)生成css的兩中模式，如果是一對一模式（一個scss生成一個css），使用空格即可；如果是多對多模式，比如一個文件夾生成到另一個文件夾，同時(shí)一次性有多個scss文件生成css文件等。

# 編譯 light.scss 和 dark.scss 到 light.css 和 dark.css. > sass light.scss:light.css dark.scss:dark.css

sass  --watch  fileFolder:outputFolder/css 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

當(dāng)名字為fileFolder這個文件夾里任意一個.scss后綴的文件變化時(shí)，就將其編譯到名字outputFolder/css這個文件夾里面（會自動生成相應(yīng)的.css文件）

4.Sass文件編譯快覽

4.1 命令行編譯配置選項(xiàng)

可以通過 sass -h 或 sass --help 查看詳細(xì)配置項(xiàng)。

配置選項(xiàng)可以指定編譯后的css的排版、是否生成調(diào)試map、開啟debug等，最常用的是 --style 和 --sourcemap。

4.2 --watch監(jiān)聽文件變化

sass使用--watch選項(xiàng)，用于監(jiān)聽scss文件的變化。這樣，當(dāng)scss文件內(nèi)容有改動時(shí)，會自動編譯為css。

• 監(jiān)聽單個scss文件

sass --watch .\firstsass.scss .\firstsass1.css 


    

        1
    

• 監(jiān)聽scss文件夾

sass --watch .\scssdir\ .\cssdir\

sass --watch scssdir:cssdir 


    

        1
    

    

        2
    

    

        3
    

可以看到，使用 : 可以指定輸出的路徑（文件夾），否則css將默認(rèn)生成在源scss文件所在目錄中。

• 結(jié)合 --style 監(jiān)聽

sass --watch app/sass:public/stylesheets --style=compressed 


    

        1
    

使用壓縮（compressed）的樣式（style）輸出 css 文件

4.3 --style指定css的樣式

--style 的css格式有兩種：expanded（默認(rèn)）、compressed。

舊版本的Ruby實(shí)現(xiàn)中有四種樣式，還有nested、compact。

// 指定編譯格式
sass input.scss:output.css --style=expanded 


    

        1
    

    

        2
    

比如，一個scss文件如下：

.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

下面，可以查看expanded、compressed編譯后的css格式。

1. expanded ：默認(rèn)值，未壓縮的展開的css格式

每個選擇器和聲明單獨(dú)一行。

執(zhí)行如下命令編譯：

sass styletest.scss styletest.css --style=expanded

# 或 sass styletest.scss styletest.css 


    

        1
    

    

        2
    

    

        3
    

expanded編譯過后的樣式，是標(biāo)準(zhǔn)的沒有經(jīng)過任何壓縮，全部字符展開的css格式：

.box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

1. compressed 去除所有的空白字符，全部css內(nèi)容壓縮為一行

生產(chǎn)環(huán)境中推薦的css格式。

執(zhí)行如下命令編譯，將css結(jié)果輸出在命令行中：

sass --style=compressed styletest.scss

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px} 


    

        1
    

    

        2
    

    

        3
    

5.使用VSCode插件編譯

5.1 基本使用

live sass compiler是VSCode擴(kuò)展，可以實(shí)時(shí)地將SASS / SCSS文件編譯/轉(zhuǎn)換為CSS文件。

• 可以自動添加css兼容性前綴，-webkit-，-moz-，-ms，-o-等。
• 可以自定義css文件解析后的代碼樣式（expanded 展開，compact，compressed 壓縮，nested）。
• 可自定義編譯/轉(zhuǎn)換后的文件擴(kuò)展名（.css或.min.css）。

1.在vscode插件里搜索live sass compiler安裝。

2.安裝后，新建scss文件，在vscode底部狀態(tài)欄中點(diǎn)擊watch sass，此時(shí)狀態(tài)為 Watching ，即可自動解析sass為css文件。

5.2 自定義設(shè)置

在使用live sass compiler插件時(shí)，并不是所有的默認(rèn)設(shè)置都如我們所愿，那么，我們來看一下如何自定義設(shè)置。

1.編譯/轉(zhuǎn)換后的文件格式、擴(kuò)展名、保存位置

• 文件格式
  格式可以是expanded，compact，compressed或nested。默認(rèn)值為 expanded。
• 擴(kuò)展名
  擴(kuò)展名可以是.css或.min.css。默認(rèn)值為.css。
• 保存位置
  默認(rèn)的轉(zhuǎn)換后的css文件保存在scss文件的同級目錄下，但實(shí)際，我們通常需要把所有scss文件保存在scss文件夾，而css文件希望保存在css的文件夾，如圖所示：
  

我們在配置中如下設(shè)置：

"liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" } ] 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

savePath即為導(dǎo)出后的文件保存位置。

2.去掉編譯時(shí)出現(xiàn)的css.map文件
在每個文件編譯后，默認(rèn)設(shè)置下，會同時(shí)出現(xiàn)一個map格式的文件，有時(shí)并不需要該文件，那么我們?nèi)绾稳サ裟兀?

"liveSassCompile.settings.generateMap": false, 


    

        1
    

默認(rèn)值為true，我們設(shè)置為false即可。

3.設(shè)置css兼容性前綴
live sass compiler可以在編譯時(shí)自動添加CSS兼容性前綴（-webkit-，-moz-，-ms，-o-等），如下設(shè)置：

"liveSassCompile.settings.autoprefix": [ "> 1%", "last 3 versions" ], 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

其中，

• ">1%"是指 通過全球使用情況統(tǒng)計(jì)信息選擇出的高于1%使用率的瀏覽器版本。
• "last 3 versions"是指 每個瀏覽器的最后3個版本。

這里也可以設(shè)置為具體的瀏覽器，如下：

"liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ], 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

總結(jié)

個人配置：

"liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }, "liveSassCompile.settings.showOutputWindow": true ] 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

壓縮生成min.css文件 "liveSassCompile.settings.formats": [ // More Complex { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ] 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

    

感覺總體作用不大，還是結(jié)合webpack等工具，實(shí)時(shí)更新頁面內(nèi)容時(shí)，實(shí)時(shí)編譯scss，而不需要單獨(dú)使用該工具。

6.使用webpack編譯

在目前主流的前端項(xiàng)目中，一般是使用 Webpack 來構(gòu)建我們的前端項(xiàng)目，并且大多數(shù)都跑在 Node 環(huán)境下。

行如下命令安裝 sass-loader ：

npm install mini-css-extract-plugin -D npm install css-loader -D npm install sass-loader --save-dev 


    

        1
    

    

        2
    

    

        3
    

webpack.config.js

    藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。  分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。  藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。