13 变量与混合宏的定义与使用

在前一篇文章中，我们讨论了 SASS/SCSS 的基础语法以及编译与输出的方式。今天，我们将深入探讨 SASS/SCSS 中的变量定义与使用，了解如何高效地管理样式中的值，并为混合宏的创建与应用打下基础。

什么是变量？

在 SASS/SCSS 中，变量是用于存储样式值的占位符。使用变量可以使你的代码更加整洁、可维护和可重用。定义变量的基本语法为：

$variable-name: value;

例如，我们可以定义一个颜色变量：

$primary-color: #3498db;

使用变量

一旦定义了变量，就可以在样式表的任何地方使用它。使用变量可以通过 $variable-name 的形式来引用。例如：

.button {
  background-color: $primary-color;
  color: white;
}

在编译后，以上代码将生成：

.button {
  background-color: #3498db;
  color: white;
}

定义变量的好处在于，当你需要更新样式时，只需更改变量的值，而不需要在每个使用的地方进行修改。

变量的使用案例

以下是一个实际使用变量的例子：

$font-stack: Helvetica, sans-serif;
$primary-color: #3498db;
$padding: 10px;

.btn {
  font-family: $font-stack;
  background-color: $primary-color;
  padding: $padding;
  border-radius: 5px;
  color: white;

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

在这个例子中，我们定义了多个变量，包括字体堆栈、主色调和内边距。通过使用这些变量，我们的 .btn 类不仅更加简洁，而且容易进行全局性的样式更改。

混合宏与变量

在 SASS/SCSS 中，混合宏（Mixins）是一种将CSS声明封装并可复用的强大功能。通过 @mixin 和 @include，我们可以创建具有变量行为的混合宏。

我们将在下一篇文章中详细讨论混合宏的创建与应用。但在此之前，让我们简单了解如何将变量与混合宏结合使用。

创建一个简单的混合宏

我们可以定义一个混合宏来应用通用的按钮样式，并使用变量来定义不同的样式：

@mixin button($bg-color, $text-color: white, $padding: 10px) {
  background-color: $bg-color;
  color: $text-color;
  padding: $padding;
  border-radius: 5px;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: lighten($bg-color, 10%);
  }
}

// 使用混合宏
.btn-primary {
  @include button($primary-color);
}

.btn-secondary {
  @include button(#e74c3c);
}

在上面的代码中，我们创建了一个 button 的混合宏，它接受背景色、文字颜色和内边距作为参数。在使用时，我们可以简单地调用 @include，并传入所需的参数或变量。这样，样式的复用与一致性得以提升。

总结

变量在 SASS/SCSS 中的使用使得样式表更加灵活，可维护性更高。我们学习了如何定义和使用变量，并探索了混合宏的概念以及它们与变量的配合使用。下篇文章将着重讲解混合宏的创建与应用，带领大家深入了解 SASS/SCSS 的更高级用法。

希望这篇文章能够帮助你更好地理解 SASS/SCSS 中的变量管理，为你的前端开发工作带来便利。在接下来的学习中，请继续关注混合宏的强大功能！