原生項目使用 sass

首先要了解的是：sass是基於Ruby語言開發而成，所以安裝sass前須要點擊進入下載安裝Ruby。

建議安裝版本： Ruby 2.7.1-1 (x64)

 

 

雖然sass是基於Ruby語言開發的，可是咱們只須要安裝該軟件就能夠了，不須要學習Ruby語言

安裝Ruby：

　　

 

 

 注意，勾選Add Ruby executables to your PATH添加到系統環境變量，這樣就不用本身再從新配置環境了。

路徑，能夠本身選擇安裝的位置。

安裝完成以後：在命令行工具上輸入：ruby -v 則可查詢ruby的版本號。

　　

 

 

 

 接下來開始安裝sass:

　　Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。咱們可使用這個系統來 輕鬆地安裝Sass和Compass。

　　要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

　　gem install sass //安裝sass

　 gem install compass //安裝compass

　　若是mac安裝遇到權限問題需加 sudo 如 sudo gem install sass

　安裝完成以後，分別輸入 sass -v 和 compass -v 來驗證安裝版本。

 

　　

 

 

 接下來你就能夠去開發你的 scss 了。由於瀏覽器不能直接解析 scss 文件，因此要先將 scss 編譯爲 css 文件 才行，下面來講一下sass的幾個命令行編譯方法：

　　1. //單文件轉換命令

　　sass input.scss output.css  //這裏 input.scss表明要被編譯的 scss文件 output.css表明編譯以後的css文件（單個文件編譯方法）

　　2. //單文件監聽命令

nested 編譯排版格式，　sass --watch input.scss:output.css //這裏監聽的意思就是指定它編譯成 css 是怎麼排版的

　3.//若是有不少sass文件的目錄，也可讓sass監聽整個目錄：

　sass --watch app/sass:public/stylesheets //將app文件夾裏的sass（scss）文件所有編譯爲上線的css文件。

編譯的格式有四個：
　1.命令行：sass style.scss:style.css --style nested 這裏的style.scss表明要編譯的scss 文件,
style.css表明編譯以後生成的css文件 --style 後面的 nested 表明的是這個編譯生成的css是以什麼格式排版的

　2.expanded 編譯排版格式，/*編譯事後樣式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }命令行：sass style.scss:style.css --style expanded

3.compact 編譯排版格式，/*編譯事後樣式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }命令行：sass style.scss:style.css --style compact

4.compressed 編譯排版格式，/*編譯事後樣式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }命令行：sass style.scss:style.css --style compressed

綜上，通常狀況下使用第 2 和 第 4 種方法編譯比較多，最好的方法是，在開發中先用 第2種 方法編譯，在上線項目的時候在使用 第4中方法編譯/*編譯事後樣式*/ .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

編譯完以後就能夠看到文件夾中生成了一個 css 文件了。經過在html的link標籤引用該css則可。