一、Sass概況

今天來聊聊sass吧，之前用了很久的less，剛開始接觸的時候感覺這東西就是個神器。

寫CSS時間長了自然就能發現CSS在書寫的時候的不足之處，不能嵌套，沒有變量，更加不能像js那樣用循環自動生成之類的，這些問題全部都被less解決掉了。

less加入了變量，加入了嵌套式寫法，還有一大堆好用的功能，在這里就不多說了，今天要說的是sass。其實剛接觸less的時候就知道有sass這個東西了，但是那時候的sass很奇怪，寫法過于新穎，大家感受一下：

bodymargin: 0padding: 0height: 20pxwidth: 30px...

看出來了么？ 對的，sass早期的時候有規定書寫格式，不這么寫它就給你報錯，這個在習慣上來說一時間是比較難接受的，特別是我們這種寫CSS好幾年的人來說更加如此，而后面sass的升級版又把它強加的書寫格式去掉了可能就是考慮到這方面。

第二個不能接受sass的點就是安裝比較麻煩，從事前端開發的人員，電腦上基本上是少不了node的，less可以直接用npm包管理器進行安裝，這就很方便了，而sass就相對麻煩一些了，還需要先安裝ruby。 因為sass是基rub語言開發的(mac系統自帶ruby,后來才知道)從過程來說就多了一步。另外一點，less可以作為一個js文件直接在客戶端運行，這無疑又拉近了和前端開發者之間的距離，所以早期的時候大家都比較傾向于less。

Bootstrap也是這么選擇的，Bootstrap 3.0就是用less進行開發的。而對于前幾年來說，less也足以滿足大家的需求了。

但是經過這幾年的發展，大家的技術在進步，需求也在變得更加復雜，這時候less就顯得有點力不從心了，并不是它不好了，只是對于工作幾年的中高級程序員來說，大家需要一個功能更加強大的CSS預處理器。

于是這時候回頭一看，sass一直都在我們身邊，看看它的文檔，雖然寫得有點亂，但是各方面都比較符合我們的需求，越看越順眼了。而且現在的sass也升級了，做到了完全兼容CSS3, 在CSS基礎上增加變量、嵌套、混合等功能。可以通過函數進行顏色值與屬性值的運算，提供控制指令等高級功能，甚至可以自定義輸出格式。

另外一點，隨著各大框架的推行，less和sass的編譯工作變得越來越簡單，安裝個loader就好了，不需要全局安裝編譯器了。另外很多編輯器也自帶編譯，這樣一來，less前期的那些優勢蕩然無存。那，接下來，跟我一起來看看sass吧。

通過前面的介紹，我想大家已經知道了，sass是一個CSS預處理語言。 在這里要明確一個概念，什么是CSS預處理語言呢?

簡單來說CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。

再通俗一點，就像是文言文和白話文。 文言文幾個字，翻譯成白話文就是一片文章。當然在這里只是一個類比。

基本概念理解清楚了，sass有這么多好用的功能，但是我要如何把sass用到我的項目當中呢？請往下看。

二、Sass的安裝

前面已經提到了，Sass是用Ruby語言開發的，所以在安裝Sass之前，需要先安裝Ruby。

這里要注意幾點：

Mac系統是自帶Ruby的，所以就不需要再次安裝啦，所以下面安裝Ruby的方法也只適用于Windows系統。

一些基于插件的編輯器，比如vsCode、Atom之類的，不需要安裝sass，直接安裝插件就可以進行編譯。

Windows下安裝Sass首先需要安裝Ruby, 先從官網下載Ruby并安裝。安裝的過程中請注意勾選 Add Ruby executables to your PATH添加到系統環境變量。如下圖：

Windows下安裝Ruby示例圖

安裝完成之后需要測試安裝有沒有成功，在命令行工具(cmd)里面運行以下下命令：

rubu -v 如果安裝成功會打印下面這句話： ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

Ruby安裝好了之后，我們就可以利用Ruby的包管理工具gem安裝Sass了，同樣還是在Cmd里運行以下命令：

gem install sass

安裝完成之后，還是老辦法檢查以下安裝是否成功：

sass -v

如果安裝成功，則會打印以下代碼：

Ruby Sass 3.7.4

看到這里，我們基本上就可以順利的玩耍啦~ 附上一些其他相關命令～

更新sass:

gem update sass

查看sass版本:

sass -v

查看sass幫助：

sass -h

現在我們寫去一點sass代碼吧：

body{margin: 0;background: #fefefe;}.box{width: 100px;height: 100px;border: 1px solid #899;}

你沒有看錯，以上看起來和CSS簡直一模一樣的代碼其實就是sass代碼！是不是很神奇？當然這段代碼編譯使用過后的效果當然也就和CSS一樣啦。看到這里，我想說的是，大家學習sass千萬不要有任何的負擔，因為安裝好sass之后，sass就可以和CSS一樣寫，如果你現在還沒有任何的CSS預處理語言的編寫經驗，你完全可以像以前寫CSS那樣來寫代碼。如果你在看這篇文章的過程當中，一不小心學會了一招半式的，那就是提升了。

不過這里有一點需要提一下，sass有兩個文件后綴，一個是.sass 一個是.scss scss是sass的升級版，他們都統稱Sass 只是文件后綴不一樣。然后.sass后綴的文件是固定代碼格式的，就是在一開始我提到的那樣寫：去掉“{}”，去掉“;” 這讓代碼看起來有點怪，不過習慣就好了。 而.scss后綴結尾的文件就比較友好了，怎么寫都可以，而且它是升級版，所以我們以后在使用的過程中就用.scss就好了

寫好了sass代碼之后，我們就需要把sass編譯成CSS然后應用到我們的項目當中了。這個過程就可以稱為編譯了。

三、Sass 編譯

sass編譯有很多種方式，如命令行編譯模式、編輯器自動編譯、編譯軟件koala、sass-loader等。

先來看第一種：命令行編譯

剛才我在test文件夾里面已經建立了一個style.scss文件，現在我需要把這個文件編譯成CSS文件，那么我可以先用命令行工具進入這個文件夾 “cd”就是進入某個文件夾的命令，后面跟上你電腦上文件夾的路徑就可以了：

cd test

進入文件夾之后再使用sass的編譯命令:

sass input.scss output.css

編譯成功不會有任何的提示，但是文件夾里面馬上就會出現output.css這個文件。

這個input是原本的scss文件的名稱，然后output是編譯出來之后的CSS文件的名稱，這個名稱大家可以隨意，保持基本命名規則就可以了。

利用命令還可以實時監測某個文件，當這個文件發生變化的時候，自動完成編譯過程。

//單文件監聽命令

sass --watch input.scss:output.css

在監聽成功之后會打印以下代碼：

>>> Sass is watching for changes. Press Ctrl-C to stop.

根據提示，這時候按Ctrl + C可以停止這個命令。

在監聽的過程中如果文件發生改變，并且自動編譯成功則會打印以下代碼：

>>> Change detected to: tests.scsswrite output.csswrite output.css.map

利用命令還可以實時監測某個文件夾，這個文件夾下的所有scss文件都會被監聽。

sass --watch targetFolder:outputFolder

在監聽成功之后會打印以下代碼:

>>> Sass is watching for changes. Press Ctrl-C to stop.

前面的targetFolder是要監聽的目標文件夾，后面的outputFolder是要輸出的文件夾。 比如我想把CSS文件夾里的scss文件編譯到style文件夾里，就可以這樣寫：

sass --watch css:style

在這里要注意一點：這個時候你需要在CSS和style文件夾的共同父級文件夾里面才能開啟這個功能，否則會報錯。

在編譯的時候，還可以配合編譯選項，用于調整輸出文件。

sass提供四種編譯格式：

nestedexpandedcompactcompressed

看看區別：

//未編譯樣式

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

nested 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style nested

/*編譯過后樣式*/

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

expanded 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style expanded

/*編譯過后樣式*/

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

compact 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style compact

/*編譯過后樣式*/

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

compressed 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style compressed

/*編譯過后樣式*/

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

不同的編譯格式得到的代碼其實是一樣的，只是排版格式不同，大家看情況去用就好了。我的建議是，開發的時候用expanded格式，比較清楚。當你需要發布你的代碼的時候，使用compressed格式，這個格式會讓CSS文件相對較小。

第二種，編輯器直接編譯

相對于第一種編譯方式來說，用編輯器來幫助我們編譯者省去了我們在開發過程中的很多操作，比如用cd命令進入某個文件夾，退出文件夾之類的，并且不是所有人都熟悉命令操作方式的。這時候就顯得這種編譯方式可能會更加好用，我在工作過程中大多數也是用這種方式來進行編譯的，來看具體操作吧：

注意！用編輯器編譯的基礎也是安裝Sass，所以Sass的安裝過程是必不可少的！！！

既然想要讓編輯器幫助我們做事情，那么就需要對編輯器的一些配置進行調整。

來看看 webstorm:

依次打開 setting > tools > file Watchers，界面大致如下圖：

webstorm頁面

打開之后點擊左下角的加號，在彈出的界面里選擇scss。

webstorm選擇scss

選擇之后，會彈出一個窗口：

webstorm選擇scss的彈出窗口

在這個窗口里有兩項需要調整，我已經用紅框標出來了。

第一項，Program 這里是需要選擇編譯所用的程序，點擊后面的文件夾圖標進行選擇；

windows電腦在安裝Ruby的文件夾里，如果沒有修改的話一般是在C盤：

C:/user/username/AppData/Roaming

Mac電腦一般在“usr/local/bin”，在選擇文件的窗口里按快捷鍵：Command + Shift + G，然后輸入：usr/local/bin回車，就可以找到對應的文件夾了。

在文件夾里找到一個名字為scss的文件：

scss

第二項，Arguments 這里主要是設置編譯參數，比如前面我們提到的四種編譯格式就可以加載這里面，具體看前面的圖片。

至此，Sass的準備工作我們就做好了，之后我們可以愉快的coding了...

以上是酷仔今日整理的“CSS擴展語言——Sass入門指南”一文，希望為正在學習Web前端的同學提供學習參考。

特殊說明：以上內容資料由開課吧提供！

總結

以上是生活随笔為你收集整理的css 样式三元运算_CSS扩展语言——Sass入门指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。