SASS 规则和指令

SASS 是一种 CSS 预处理器，它的出现让 CSS 开发变得更加高效、灵活。在 SASS 中，有许多不同的规则和指令，下面将介绍其中的一些。

规则

变量规则 ($)

变量规则用于定义变量，可以把重复使用的颜色、字体、大小、间距等保存在变量中，方便后续的使用。在 SASS 中，变量规则以 $ 开头，后跟变量名和变量赋值:

$primary-color: navy;

body {
  background-color: $primary-color;
}

其中，变量 $primary-color 定义为 navy，body 的背景颜色为 $primary-color，即 navy。

嵌套规则

嵌套规则可以让 CSS 代码更加简洁易懂，通过嵌套结构表示元素与元素之间的关系。在 SASS 中，可以使用 & 表示当前元素。

.nav {
  &__item {
    ...
  }
}

上面的代码表示 .nav 元素的 子元素.nav__item。

插值规则 (#{})

插值规则可以在样式中插入变量和计算表达式。使用 #{ } 括号将变量或表达式包裹起来，并在后面加上单位。

$column-count: 4;

.wrapper {
  width: #{$column-count * 120}px;
}

上述代码中 $column-count 定义为 4，通过插值规则可以将计算的值插入到样式中。

指令

导入指令 (@import)

导入指令可以将多个 SASS 文件合并成一个 CSS 文件。通过 @import 导入文件时，文件名前可以不加 _，而直接使用文件名即可，后缀为 .scss 或 .sass。

@import 'reset';
@import 'base';

上面的代码定义了导入了两个文件，分别是 reset.scss 和 base.scss。

混合指令 (@mixin)

混合指令用于定义可以重用的样式代码块，称为 Mixin。Mixin 是一些常用的 CSS 样式代码块的集合，在不同的元素和 HTML 结构之间共享应用。

@mixin text-highlight($color) {
  background-color: $color;
  color: #fff;
}

.btn--primary {
  @include text-highlight(navy);
}

.btn--danger {
  @include text-highlight(red);
}

上述代码中，定义了一个 Mixin，用于设置背景色和前景色，通过 @include 将 Mixin 插入到具体的元素中，以应用背景色和前景色。

继承指令 (@extend)

继承指令用于复用现有的 CSS 代码块。通过 @extend 将代码块指定给不同的元素类型或类，以便它们重用公共 CSS 样式。

.btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}

.btn--primary {
  @extend .btn;
  color: navy;
}

上述代码中，定义了一个 .btn 元素，通过 @extend 可以将其样式继承到 .btn--primary 元素中。这样，.btn--primary 就拥有了 .btn 的所有属性和方法。

总结

SASS 规则和指令使得 CSS 开发更加简单、高效。在开发中，可以通过变量、嵌套、插值、导入、混合、继承等功能，来提高 CSS 开发效率，减少代码量，提高代码可维护性。