Sass 语法

Sass 支持两种语法

SCSS 语法： SCSS (Sassy CSS) 可以被指定为 CSS 语法的扩展。 这仅仅意味着每个有效的 CSS 也是有效的 SCSS。 SCSS 使得维护大型样式表变得容易。 它使用扩展名 ".scss"。

缩进语法： 缩进语法是较旧的语法，被称为 Sass。 必须简洁地编写 CSS 才能使用这种类型的语法。 它使用扩展名 ".sass"。

Sass 缩进语法

SASS 缩进语法或 SASS 是基于 CSS 的 SCSS 语法的替代方案。 它具有以下特点

• 它使用缩进而不是 {和} 来分隔块。
• 它使用换行符而不是分号 (;) 来分隔语句。
• 属性声明和选择器必须放置在其自己的行上，并且 {和} 中的语句必须放置在新行上并缩进。

请看以下 SCSS 代码

这种语法比较旧，因此不建议在新 Sass 文件中使用。 如果使用此文件，将会得到一个显示错误。

Sass 的语法差异

大多数 CSS 和 SCSS 语法都与 SASS 兼容，但也有一些差异。 可以在以下部分中看到差异

1.属性语法

例如

默认情况下，可以使用两种属性声明方法，即没有分号和冒号前缀的属性名称，但是在使用时，您应该只使用一种属性语法来指定: property_syntax 选项。

2.多行选择器

在缩进语法中，多行选择器指定可以在逗号后每次出现选择器时将其放置在新行上。

请看这个例子

HTML 文件：example.html

SCSS 文件：style.scss

告诉 SASS 监视该文件，并在 SASS 文件更改时更新 CSS。

使用 ruby 打开命令提示符，并输入以下命令

sass --watch style.scss:style.css

它将创建一个 style.css 文件。 现在，运行 example.html 文件

输出

在此示例中，您可以看到多行选择器的使用。

@import 指令

在 SASS 中，@import 指令可以使用或不使用引号编写，而在 SCSS 中，它们必须与引号一起使用。

例如： 在 SCSS 中，@import 指令可以这样使用

在 Sass 中，它可以这样写

Mixin 指令

SASS 支持 @mixin 和 @include 等指令的简写属性。 您可以使用 = 和 + 字符代替 @mixin 和 @include。 这需要更少的打字，并使您的代码更简单，更易于阅读。

例如： 您可以这样编写 mixin 指令

它和以下代码相同