sass 教程
1-1 sass 簡介
css 不是乙個程式語言，可以用它來開發網頁樣式，但是沒有辦法用它進行程式設計。sass 的
出現，讓 css 實現了通過**程式設計來實現的方式。
so…sass 是一種 css 開發工具，提供了許多便利的寫法，讓 css 的處理實現了可程式設計
處理。sass 擴充套件了 css3，增加了規則、變數、混入、選擇器、繼承等等特性，可以生成風格良好
的 css 樣式表檔案，易於組織和維護。
1-2 sass 安裝
sass 是 ruby 語言開發的乙個用於動態程式設計 css 檔案的框架，但是學習 sass 跟 ruby 沒
有任何關係，唯一的聯絡就是 sass 的執行以來 ruby 環境。
sass 官網：
1-2.1 mac 安裝
mac 上一般情況已經有 ruby 環境的支援，所以只需要開啟終端，輸入一下命令進行安裝
sass 教程
gem install sass
備註：安裝完成後，使用如下命令進行測試【檢視安裝版本命令】
sass -v
1-2.2 windows 安裝
安裝 ruby
sass 的依賴環境，必須安裝。
通過命令提示符黑視窗執行命令進行安裝
gem install sass
1-3 quick start
1-3.1 入門程式
檔案結構
|-- worksass/
|-- css/
|-- demo01.scss
在指定的資料夾中建立 demo01.scss 文字檔案
@charset 」utf-8」; // 設定支援中文注釋
body
命令列中，執行如下命令進行編輯
sass [scss_name]:
sass scss 檔案:編譯好的目標 css 全路徑名稱
編譯結果：在指定的資料夾 css 中生成了指定的 css 樣式表檔案：demo01.css
1-3.2 自動編譯命令
watch 命令
語法
sass --watch sass:csssass --watch 要監聽的目錄:編譯後的 css 檔案的位置
使用 watch 命令
開始監聽【–watch .:css 命令中，.表示當前目錄】
修改 sass 檔案
sass 教程
編寫：老木
命令列監聽提示
目標 css 檔案樣式
1-3.3 編譯輸出格式
預設情況下，sass 提供了四種格式的 css 輸入，預設情況輸出是巢狀格式
格式 描述
nested 巢狀
compact 緊湊——
expanded 擴充套件——完全格式化標準
compressed 壓縮——一行
不同格式的展示方式
案例 1：巢狀格式——不常用
demo02.scss【以下是 sass 中巢狀格式的寫法】
demo02.css【輸出的 css 樣式中，會儲存這樣的巢狀的縮排格式】
sass 教程
案例 2：緊湊格式——常用
修改輸出樣式
>> sass --watch .:css --style compact
命令列修改輸出格式
修改格式 demo02.scss
輸出格式 demo02.css
案例 3：擴充套件格式——常用——規範的 css **格式
修改輸出樣式格式
sass --watch .:css --style expanded修改 demo02.scss 檔案
… .**同上. …
輸出 demo02.css 檔案格式
sass 教程
sass --watch .:css --style compressed修改 demo02.scss 檔案
… . **同上. …
輸出 demo02.css 檔案格式
1-3.4 sass 副檔名
.sass【sass3.0-版本】
.scss【sass3.0+版本，常用】
這兩種在書寫**格式上，有一定的區別
根據專案開發的規範，scss的寫法和專案規範更加契合，同時**的可讀性也提高了很多，
所以正常情況下，專案組都會採用.scss 格式的語法進行 sass 程式開發。
.sass .scss
備註：sass 有兩種字尾名檔案：一種字尾名為 sass，不使用大括號和分號；另一種就是我們這裡使用的 scss 檔案，這種
和我們平時寫的 css 檔案格式差不 多，使用大括號和分號。而本教程中所說的所有 sass 檔案都指字尾名為 scss 的檔案。
在此也建議使用字尾名為 scss 的檔案，以避免 sass 字尾名的嚴 格格式要求報錯。
sass 教程
Sass 環境除錯
css的預編譯工具有很多 less sass stylus postcss 等等 css預處理器用一種專門的程式語言，進行web頁面樣式設計，然後再編譯成正常的css檔案，以供專案使用。為css增加一些程式設計的特性，無需考慮瀏覽器的相容性問題，例如你可以在css中使用變數 簡單的邏輯程式 函式等等...
Sass教程二 Sass的安裝
前面已經提到了，sass是用ruby語言開發的，所以在安裝sass之前，需要先安裝ruby ruby安裝好了之後，我們就可以利用ruby的包管理工具gem安裝sass了，同樣還是在cmd裡執行以下命令 gem install sass安裝完成之後，還是老辦法檢查以下安裝是否成功 sass v 如果安...
sass安裝教程
在安裝的時候，請勾選add ruby executables to your path這個選項，新增環境變數，不然以後使用編譯軟體的時候會提示找不到ruby環境 安裝完ruby之後，在開始選單中，找到剛才我們安裝的ruby，開啟start command prompt with ruby 然後直接在...