LESS 中的变量和函数：完全解读-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，可以通过变量和函数等方式提供更加强大的样式表编写能力。本文将详细解读 LESS 中的变量和函数，以及如何使用它们来提升前端开发效率。

变量

LESS 变量是用来存储值的容器，可以在样式表中多次使用。定义 LESS 变量的语法为 @变量名: 值;，如下所示：

@primary-color: #007aff;

在上述代码中，我们定义了一个 primary-color 变量，并将其值设置为 #007aff。接下来，我们可以在样式表中使用该变量：

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

在上述代码中，我们使用了 primary-color 变量来设置按钮的背景颜色。这样做的好处是，如果我们需要修改主色调，只需要修改 primary-color 变量的值即可，而不用修改所有使用该颜色的样式。

除了定义颜色等基础类型的变量外，我们还可以定义其他类型的变量，如下所示：

@font-size: 16px;
@border-radius: 4px;
@transition: all 0.3s ease;

LESS 提供了许多内置函数，可以用来操作数值、颜色等数据类型。下面是一些常用的 LESS 函数：

darken() 函数用于将颜色变暗，其语法为 darken(颜色, 百分比)。例如，我们可以使用以下代码将主色调变暗 10%：

@primary-color: #007aff;
.button {
  background-color: darken(@primary-color, 10%);
}

同理，lighten() 函数用于将颜色变亮，其语法为 lighten(颜色, 百分比)。

mix() 函数用于将两种颜色混合，其语法为 mix(颜色1, 颜色2, 比例)。例如，我们可以使用以下代码将主色调和白色按比例 3:1 混合：

@primary-color: #007aff;
.button {
  background-color: mix(@primary-color, #fff, 25%);
}

calc() 函数用于进行数学计算，其语法与 CSS 中的 calc() 函数相同。例如，我们可以使用以下代码将按钮宽度设置为屏幕宽度的一半：

.button {
  width: calc(50% - 10px);
}

unit() 函数用于将数值转换为指定单位，其语法为 unit(数值, 单位)。例如，我们可以使用以下代码将按钮高度设置为 40 像素：

.button {
  height: unit(40, px);
}

color() 函数用于将字符串转换为颜色值，其语法为 color(字符串)。例如，我们可以使用以下代码将字符串 #007aff 转换为颜色值：

@primary-color: #007aff;
.button {
  background-color: color("@{primary-color}");
}

在上述代码中，我们使用 @{} 语法将 primary-color 变量转换为字符串。

本文介绍了 LESS 中的变量和函数，以及如何使用它们来提升前端开发效率。通过使用 LESS 变量和函数，我们可以更加方便地管理样式表，减少代码冗余，提高代码复用率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66050916d10417a222294de3