SASS - 使用Sass程序

---

• SASS – 簡介
• SASS – 環境搭建
• SASS – 使用Sass程序
• SASS – 語法
• SASS – 變量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（繼承）指令
• SASS – 操做符
• SASS – 函數
• SASS – 輸出格式

---

如今已經安裝了Sass程序，接下來咱們將建立一個Sass文件，而後使用Sass程序將其轉換爲css文件。

編寫源文件

打開編輯器（任何代碼編輯器均可以）建立一個名爲styles.scss的文件，注意.scss擴展名。添加如下內容，而後保存文件。

styles.scss

$primary-color: orange;
$secondary-color: gold;

body {
  color: $primary-color;
  background: $secondary-color;
}

這個文件通過sass程序編譯後將生成以下的css文件：

styles.css

body {
  color: orange;
  background: gold; 
}

生成css文件

咱們讓Sass程序監測源文件改動，有任何改動從新生成css文件。

打開命令行工具，切換到styles.scss文件所在目錄，執行如下命令:

sass --watch styles.scss:styles.css

這裏指定了要監測的SCSS文件，以及要生成的CSS文件名。

不僅是單個文件，也能夠監測整個目錄。

命令輸出以下：

> sass --watch styles.scss:styles.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
      write styles.css
      write styles.css.map

能夠看到已經生成了styles.css文件。另外還有一個styles.css.map文件，這是一個json格式文件，記錄了scss源文件到css文件的映射信息。

生成的styles.css文件內容以下：

body {
  color: orange;
  background: gold; }

/*# sourceMappingURL=styles.css.map */

能夠看到生成的css文件只包含CSS代碼，Sass源文件中設置的變量已經被處理了。

/*# sourceMappingURL=styles.css.map */表示映射文件是styles.css.map，映射文件記錄了源文件到css文件的映射信息。

Sass代碼說明

Sass文件中有2個變量，保存的是顏色值，而後咱們使用這些變量來設置主體元素的前景顏色和背景顏色。

當代碼被編譯成CSS時，變量被編譯爲具體值。