SASS - 語法

---

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

---

2種語法

Sass有兩種不一樣的語法，一種是舊版，另外一種是升級版，這兩種語法都會編譯出相同的CSS。

• sass 舊版，源文件擴展名：.sass
• scss 升級版，源文件擴展名：.scss

SCSS 是 Sass 3 引入的新語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能。Sass 和 SCSS 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

• 文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名
• 語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法和CSS 語法很是相似。

Sass 語法：

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 5px 10px
    text-decoration: none
    color: orange

SCSS 語法：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block; 
    }

  a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: orange;
  }
}

如今一般都使用scss格式。

代碼註釋

與CSS同樣，Sass支持單行註釋和多行註釋。

在Sass中，單行註釋以雙斜槓//開頭，不會出如今編譯出的CSS文件中；多行註釋格式與css相同：/* 註釋內容 */，多行註釋會出如今編譯出的CSS文件中。

CSS中，單行註釋和多行註釋都是 /* 註釋內容 */的格式。

單行註釋

示例：

// 定義顏色
$primary-color: orange;
$secondary-color: gold;

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

// 定義顏色不會出如今編譯出的CSS文件中。

多行註釋

示例：

/* 
定義顏色
$primary-color: 主色調
$secondary-color: 次色調
*/
$primary-color: orange;
$secondary-color: gold;

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

在本例中，註釋內容將出如今已編譯的CSS文件中。