9 SASS/SCSS基础语法之基本语法规则

在上一篇文章中，我们讨论了如何进行 SASS/SCSS 的安装和配置环境。在这篇文章中，我们将深入探讨 SASS 和 SCSS 的基础语法规则，它们是我们编写样式表的基础。了解这些语法规则将帮助我们更好地使用这个强大的 CSS 预处理工具。

1. SASS vs SCSS 语法

SASS 和 SCSS 是 SASS 的两种不同语法风格。SCSS 是 SASS 的一种语法扩展，更加接近于 CSS，因此更易于上手。以下是两种语法的对比示例：

SASS 语法示例

$primary-color: #333

body
  color: $primary-color

SCSS 语法示例

$primary-color: #333;

body {
  color: $primary-color;
}

可以看到，SASS 语法是以缩进方式进行书写，而 SCSS 语法则使用花括号 {} 和分号 ;。在这篇文章中，我们将主要关注 SCSS 的语法。

2. 变量的使用

在 SCSS 中，变量的定义使用$符号，定义和使用变量的语法如下：

$main-font: 'Helvetica, sans-serif';

body {
  font-family: $main-font;
}

通过使用变量，我们可以更轻松地更改样式的核心部分，而无需在整个文件中查找和替换。

3. 嵌套规则

SCSS 支持嵌套，这样我们可以在规则内部定义子规则，这样能够保持代码的结构和可读性。示例如下：

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }
}

这里，ul 和 li 是在 nav 内部的规则，嵌套使得结构一目了然。

4. 颜色和计算

SCSS 允许我们对颜色进行操作，例如使用颜色函数：

$primary-color: #3498db;
$dark-color: darken($primary-color, 10%);

.button {
  background-color: $dark-color;
}

在这个例子中，darken 函数会将 $primary-color 的亮度降低 10%。

此外，SCSS 还支持计算，可以轻松进行数学运算：

$width: 100px;
$padding: 20px;
$total-width: $width + ($padding * 2);

.container {
  width: $total-width;
}

这里，我们计算出总宽度并将其应用于 .container 类。

5. 继承（@extend）

SCSS 提供了继承功能，允许一个选择器继承另一个选择器的样式。这有助于减少代码重复：

.button {
  padding: 10px;
  border-radius: 5px;
}

.primary-button {
  @extend .button;
  background-color: $primary-color;
}

在上面的示例中，.primary-button 类继承了 .button 类的所有样式，并为 .primary-button 添加了特定的背景颜色。

6. 混合宏（@mixin 和 @include）

SCSS 提供了混合宏的功能，可以定义一组样式并在需要的地方复用。这对于处理重复的样式特别有用：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

在这个示例中，border-radius 的样式被封装在一个混合宏中，@include 可以在需要的地方调用它。

总结

在本篇文章中，我们介绍了 SASS/SCSS 的基本语法规则，包括变量、嵌套规则、颜色和计算、继承以及混合宏的使用。这些基本概念是构建复杂和可维护的样式表的基础。

在下一篇文章中，我们将继续介绍 SASS/SCSS 中注释的使用，这对编写可读性强的代码同样重要。保持关注，让我们一起深入探索 SASS/SCSS 的更多特性！