SASS | 等号运算符

1. 简介

在SASS中，等号运算符(=)是一种声明方式，它允许我们创建一个变量或一个Mixin并初始化它们的值，从而避免在代码中重复输入相同的值或代码块。

2. 声明变量

使用=来声明一个变量，语法如下：

$variable-name: variable-value;

例如，我们可以声明一个包含背景颜色的变量：

$bg-color: #f1f1f1;

这里我们声明了一个变量 $bg-color 并赋值为 #f1f1f1，在后面的代码中可以直接使用变量 $bg-color 替代其值。

3. 声明Mixin

Mixin 可以理解为函数或方法，使用=声明一个Mixin，语法如下：

=mixin-name($param1, $param2, ...) {
  // mixin body
}

其中，参数可以是变量，例如：

=grid-system($col, $gutter) {
  width: (100% / $col - $gutter);
  margin-right: $gutter;
  float: left;
}

这定义了一个名为 grid-system 的 Mixin，它有两个参数 $col 和 $gutter。在Mixins内部我们可以使用这些参数作为变量。在这个例子中，Mixins将被用来生成网格系统。

4. 调用Mixin

在代码中调用Mixin的语法非常简单，只需要在调用时使用+符号，并提供每个参数的值：

.element {
  +grid-system(4, 10px);
}

这将生成一个四列的网格系统，其中每列之间有 10px 的间距。

5. 总结

使用=来声明变量和Mixins可以提高编写代码的效率，避免重复代码和魔法数字的使用。通过使用变量并结合Mixins我们可以实现更加模块化和可重用的代码。