21 运算与函数之基本运算

在前一篇中，我们探讨了 SASS/SCSS 的嵌套规则以及如何复用选择器。今天，我们将深入了解 SASS/SCSS 中的基本运算，包括加法、减法、乘法和除法。这些运算不仅能够提高我们的代码效率，还能使样式的管理更加灵活和动态。

基本运算简介

SASS/SCSS 允许我们在样式表中进行简单的数学运算，对数值、颜色以及长度单位进行操作。这种能力使得我们在编写 CSS 时更加高效，能够根据变量和条件动态调整样式。

以下是基本运算的四种类型：

• 加法 ($a + $b)
• 减法 ($a - $b)
• 乘法 ($a * $b)
• 除法 ($a / $b)

加法

加法操作可以对数字进行简单的累加。例如，我们可以为一个元素的 margin 添加额外的空间：

$base-margin: 10px;
$extra-margin: 5px;

.box {
  margin: $base-margin + $extra-margin; // 15px
}

减法

减法操作用于从一个数字中减去另一个数字，通常用来调整长度或尺寸。例如，如果我们想要一个元素的宽度减少：

$full-width: 100%;
$padding: 20px;

.container {
  width: $full-width - $padding; // 80%
}

乘法

乘法可以用于增加比例，特别是在设置间距或尺寸的时候。例如，我们需要让元素的尺寸成倍增长：

$base-size: 50px;
$scale-factor: 2;

.box {
  width: $base-size * $scale-factor; // 100px
  height: $base-size * $scale-factor; // 100px
}

除法

除法操作可以用于将数值分配到多个部分，常用于创建网格系统或应对响应式设计：

$total-columns: 12;
$column-span: 3;

.col {
  width: (100% / $total-columns) * $column-span; // 25%
}

变量与运算结合的案例

结合变量与基本运算，可以创建非常灵活和动态的样式。例如，我们可以使用变量定义主题色和相应的深浅色调，然后根据需要创建不同的样式：

$primary-color: #3498db;
$lighten-factor: 10%; // 用于浅色调

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

  &:hover {
    background-color: lighten($primary-color, $lighten-factor); // 让颜色变亮
  }
}

在这个例子中，我们使用了lighten函数来动态调整按钮的背景颜色。

小结

今天我们讨论了 SASS/SCSS 中的基本运算，包括加法、减法、乘法和除法。这些运算对于动态样式建设至关重要，能够让我们的 CSS 更加灵活和易于维护。

在下一篇教程中，我们将继续探讨 SASS/SCSS 的强大功能，特别是颜色函数的使用方法，敬请期待！