Sass的语法介绍

本节我们来学习 Sass 的语法，Sass 支持两种语法，分别为 SCSS （Sassy CSS）和缩进语法（Indented Sass）。

缩进语法

缩进语法是 Sass 的原始语法，文件的扩展名为 .sass，所以有时候简称为 ”Sass“。缩进语法支持与 SCSS 相同的所有特性，但是它使用缩进而不是花括号 {} 来表示选择器的嵌套，使用换行而不是分号来分隔属性。

下面我们来看一下缩进的语法格式。

示例：

创建一个 style.sass 文件，内容如下所示

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

可以看到，在这段代码中，使用缩进来代替了花括号，每行样式属性之间不需要使用分号分隔。因为没有花括号可能有些人觉得这样的语法更加简洁和易读，但是我个人还是比较喜欢使用花括号和分号。

SCSS

SCSS （Sassy CSS）格式是在 CSS3 语法的基础上进行扩展，每个 CSS 样式表是一个同等的 SCSS 文件。SCSS 文件的扩展名为 .scss 。

下面我们来看一下 SCSS 的代码格式。

示例：