跳到主要内容

CSS 函数与运算

CSS预处理器（如Sass、Less等）不仅提供了变量和嵌套功能，还引入了强大的函数和运算功能。这些功能可以帮助你更高效地编写CSS代码，并实现动态计算和复杂样式逻辑。本文将详细介绍CSS预处理器中的函数与运算，并通过实际案例帮助你理解它们的应用。

什么是CSS函数与运算？​

在CSS预处理器中，函数是一段可重用的代码块，用于执行特定任务并返回结果。它们可以接受参数，并根据输入生成输出。运算则允许你在样式中进行数学计算（如加减乘除），从而动态生成属性值。

通过函数和运算，你可以减少重复代码，实现更灵活的样式设计。

CSS 函数​

1. 内置函数​

CSS预处理器提供了许多内置函数，用于处理颜色、字符串、数字等。以下是一些常见的内置函数：

  • 颜色函数：如 lighten()、darken()、rgba() 等，用于调整颜色。
  • 数学函数：如 percentage()、round()、min()、max() 等，用于数值计算。
  • 字符串函数：如 str-length()、to-upper-case() 等，用于处理文本。

示例：颜色函数​

scss
$primary-color: #3498db;

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

输出：

css
.button {
  background-color: #3498db;
}
.button:hover {
  background-color: #2980b9;
}
提示

使用 darken() 函数可以轻松生成比原色更深的颜色，而无需手动计算。

2. 自定义函数​

除了内置函数，你还可以定义自己的函数。自定义函数使用 @function 关键字定义，并通过 @return 返回值。

示例：自定义函数​

scss
@function calculate-rem($px) {
  @return ($px / 16) * 1rem;
}

body {
  font-size: calculate-rem(18);
}

输出：

css
body {
  font-size: 1.125rem;
}
备注

自定义函数非常适合将重复的计算逻辑封装起来，提高代码的可维护性。

CSS 运算​

CSS预处理器支持多种数学运算，包括加法（+）、减法（-）、乘法（*）、除法（/）等。这些运算可以用于动态计算属性值。

1. 基本运算​

示例：基本运算​

scss
$base-padding: 10px;

.container {
  padding: $base-padding * 2;
  margin: $base-padding + 5px;
}

输出：

css
.container {
  padding: 20px;
  margin: 15px;
}

2. 颜色运算​

CSS预处理器还支持对颜色进行运算。例如，你可以将两种颜色混合，或者调整颜色的透明度。

示例：颜色运算​

scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

.header {
  background-color: mix($primary-color, $secondary-color, 50%);
}

输出：

css
.header {
  background-color: #3192a6;
}
警告

颜色运算的结果可能不符合预期，建议在实际使用前进行测试。

实际案例​

案例1：响应式布局中的动态计算​

在响应式布局中，你可以使用运算动态计算宽度和间距。

scss
$container-width: 1200px;
$gutter: 20px;

.container {
  width: $container-width;
  padding: $gutter;
}

.column {
  width: ($container-width - $gutter * 2) / 3;
  margin-right: $gutter;
  &:last-child {
    margin-right: 0;
  }
}

输出：

css
.container {
  width: 1200px;
  padding: 20px;
}

.column {
  width: 386.66667px;
  margin-right: 20px;
}
.column:last-child {
  margin-right: 0;
}

案例2：动态生成渐变背景​

使用颜色函数和运算，可以动态生成渐变背景。

scss
$base-color: #3498db;

.header {
  background: linear-gradient(
    to right,
    lighten($base-color, 10%),
    darken($base-color, 10%)
  );
}

输出：

css
.header {
  background: linear-gradient(to right, #5dade2, #2980b9);
}

总结​

CSS预处理器中的函数与运算为样式编写提供了强大的工具。通过内置函数和自定义函数，你可以简化代码并实现复杂的逻辑。运算功能则允许你动态计算属性值，使样式更加灵活。

提示

尝试在实际项目中使用函数和运算，逐步掌握它们的强大功能。

附加资源与练习​

  1. 练习：定义一个函数，将像素值转换为视口单位（vw）。
  2. 练习：使用颜色函数创建一个按钮组，每个按钮的背景色比前一个按钮深10%。
  3. 资源：查阅Sass官方文档，了解更多内置函数和运算的用法。

Happy coding! 🚀