如何將Sass編譯成CSS

本節咱們來學習 Sass 的編譯，咱們寫好的 Sass 代碼，瀏覽器是不能識別的，Sass 只不過是做爲一個預處理工具，只有將 Sass 代碼編譯成 CSS 代碼後，纔可以使用。那麼 Sass 要如何編譯成 CSS 代碼呢，這就是咱們本節須要講到的內容。

Sass 的編譯方法有不少，例如：

• 命令行編譯模式：比較簡單，能夠直接在終端中輸入 Sass 指令來編譯，本節咱們主要講命令行編譯模式的使用。
• GUI工具編譯：有的比較多的看一工具備 Koala、CodeKit、Scout、Compass.app 等，這些工具都須要安裝。
• 自動化編譯：能夠使用 Grunt 或者 Gulp 來配置 Sass 自動化編譯。

命令編譯

命令編譯就是在終端中輸入 sass 命令來編譯 Sass 代碼，這種編譯方式使用起來很簡單。

示例：

假設如今有一個Sass文件，文件名爲 style.scss （Sass 文件的擴展名名 .scss），咱們須要將這個文件中的代碼編譯成 CSS 代碼，能夠執行以下命令：

sass style.scss style.css

命令執行成功後，會自動建立一個 style.css 文件。可是這樣有一個問題，就是每次更改了 style.scss 文件中的內容，都須要執行一次編譯命令，就會很麻煩。

若是要解決上述問題，能夠使用監聽命令 --watch ，例如：

sass --watch style.scss:style.css

效果以下圖所示：

這樣一旦咱們修改了 style.scss 文件，只要從新保存，就會將修改內容自動編譯到 style.css 文件中。

若是項目中有不少的 sass 文件，能夠監聽整個目錄：

sass --watch app/sass:public/stylesheets

Sass四種輸出格式

在編譯 Sass 代碼時，咱們能夠指定 Sass 的編譯輸出格式，這須要用到 --style 指令，這個指定後面可接以下四種 Sass 輸出格式：

• nested：嵌套輸出格式，默認格式。
• expanded：展開輸出方式。
• compact：緊湊輸出方式 。
• compressed：壓縮輸出方式 。

示例：

例如以 style.scss 文件爲例，內容以下所示：

.xkd{
    font-size: 14px;
    color: #ccc;
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 5px;
    }
}

• 第一種：使用 nested 編譯排版格式輸出，能夠執行以下命令：

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

編譯後的 CSS 代碼：

.xkd {
  font-size: 14px;
  color: #ccc; }
  .xkd .box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 5px; }

• 第二種：使用 expanded 編譯排版格式輸出，能夠執行以下命令：

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

編譯後的 CSS 代碼：

.xkd {
  font-size: 14px;
  color: #ccc;
}
.xkd .box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 5px;
}

• 第三種：使用 compact 編譯排版格式輸出，能夠執行以下命令：

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

編譯後的 CSS 代碼：

.xkd { font-size: 14px; color: #ccc; }
.xkd .box { width: 100px; height: 100px; border: 1px solid #000; border-radius: 5px; }

• 第四種：使用 compressed 編譯排版格式輸出，能夠執行以下命令：

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

編譯後的 CSS 代碼：

.xkd{font-size:14px;color:#ccc}.xkd .box{width:100px;height:100px;border:1px solid #000;border-radius:5px}

這四種輸出格式中，通常我會選擇使用第二種輸出格式，也就是 expanded 格式。這種格式和咱們手寫的 CSS 樣式差很少，選擇器、屬性等各佔用一行，屬性根據選擇器縮進，而選擇器不作任何縮進。