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文件中。