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