Sass - 语法

Sass - 语法 (SCSS vs. Indented)

Sass 提供了两种截然不同的语法用于编写样式表。了解这两种语法很有帮助，尽管其中一种在现代开发中更为常见。

SCSS (Sassy CSS) - 主要语法

SCSS 使用 .scss 文件扩展名，是应用最广泛的语法。它的主要特点是它是 CSS 的超集（superset）。这意味着任何有效的 CSS 样式表也是一个有效的 SCSS 样式表。这使得采纳 SCSS 变得容易，因为你可以逐渐将 Sass 特性引入到现有的 CSS 文件中。

SCSS 语法的关键特性：

• 使用花括号 {} 定义样式块。
• 使用分号 ; 分隔属性声明。
• 空格使用灵活（与 CSS 类似），但保持一致的缩进对于可读性至关重要。
• 支持所有标准的 CSS 语法，包括注释（/* ... */）。
• 还支持单行注释（// ...），这些注释在编译时会被移除。

SCSS 示例：

$primary-color: #3498db;
$padding: 15px;

.button {
  padding: $padding;
  background-color: $primary-color;
  border: none;
  border-radius: 5px;
  color: white; // 单行注释

  &:hover {
    background-color: darken($primary-color, 10%);
  }

  /* 多行注释 */
  &--large {
    padding: $padding * 1.5;
    font-size: 1.2em;
  }
}

由于与 CSS 的相似性以及更广泛的社区支持，SCSS 是新项目推荐的语法。

缩进语法 (原版 Sass)

缩进语法，通常简称为 “Sass”，使用 .sass 文件扩展名。这是最初为 Sass 创建的语法。

缩进语法的关键特性：

• 使用缩进（通常是两个空格或一个 tab）来定义嵌套和样式块，而不是花括号。
• 使用换行来分隔属性声明，而不是分号。
• 属性声明可以选择性地以冒号开头（例如 :color red），但标准的 property: value 格式现在更常见。
• Mixins 和 includes 通常使用简写（= 代表 @mixin，+ 代表 @include）。

缩进语法 (.sass) 示例：

$primary-color: #3498db
$padding: 15px

.button
  padding: $padding
  background-color: $primary-color
  border: none
  border-radius: 5px
  color: white // 单行注释

  &:hover
    background-color: darken($primary-color, 10%)

  /* 多行注释 */
  &--large
    padding: $padding * 1.5
    font-size: 1.2em

虽然功能完善，但缩进语法如今已不太常见。它对缩进的严格依赖有时被认为更容易出错，并且许多开发者更喜欢 SCSS 花括号提供的明确块分隔。

选择语法

对于大多数项目和团队，SCSS (.scss) 是推荐的选择，因为它兼容 CSS，更广泛的采纳，以及可以说更清晰的块结构。

你可能会在较旧的项目中或如果特定团队偏好缩进语法 (.sass) 时遇到它。如果需要，工具通常可以在两种语法之间进行转换（例如，使用旧版 Ruby Sass 附带的 sass-convert 命令行工具，或者其他社区工具）。