LESS 中变量与函数的基本用法-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它扩展了 CSS 语言，使得 CSS 更加灵活和易于维护。在 LESS 中，我们可以使用变量和函数来简化 CSS 的编写，提高代码的重用性和可维护性。本文将介绍 LESS 中变量与函数的基本用法，并提供一些示例代码供读者参考。

变量

在 LESS 中，我们可以使用 @ 符号来定义变量。变量的命名规则和 CSS 的命名规则相同，但是要以 @ 符号开头。例如：

@primary-color: #007bff;
@secondary-color: #6c757d;

上面的代码定义了两个颜色变量，分别用于主色和次色。在编写 CSS 样式时，可以使用这些变量来代替实际的颜色值。例如：

body {
  background-color: @primary-color;
  color: @secondary-color;
}

上面的代码将页面的背景色设置为主色，文字颜色设置为次色。

使用变量的好处是，可以避免在多个地方重复使用相同的颜色值，从而提高代码的可维护性。如果需要修改颜色，只需要修改变量的值即可，所有使用了该变量的地方都会自动更新。

除了变量，LESS 还提供了一些常用的函数，可以用于计算、转换、操作等。以下是一些常用的函数：

lighten 函数可以将颜色变亮，darken 函数可以将颜色变暗。这两个函数接受两个参数：要变化的颜色和变化的程度（0% 到 100%）。例如：

@primary-color: #007bff;
.lighten-primary {
  color: lighten(@primary-color, 20%);
}
.darken-primary {
  color: darken(@primary-color, 20%);
}

上面的代码定义了一个主色变量，并使用 lighten 和 darken 函数将其变亮和变暗。这样可以在不改变主色变量的值的情况下，得到更浅或更深的颜色。

mix 函数可以将两种颜色混合在一起，生成一种新的颜色。这个函数接受三个参数：两种颜色和混合的程度（0% 到 100%）。例如：

@primary-color: #007bff;
@secondary-color: #6c757d;
.mix-color {
  background-color: mix(@primary-color, @secondary-color, 50%);
}

上面的代码将主色和次色混合在一起，生成一种新的颜色，并将其作为背景色。这样可以在不使用图片或渐变的情况下，得到一种带有渐变效果的背景色。

round 函数可以将一个数四舍五入到最接近的整数，ceil 函数可以将一个数向上取整。这两个函数可以用于计算和布局。例如：

@base-font-size: 16px;
@line-height: 1.5;
@line-height-pixels: ceil(@line-height * @base-font-size);

上面的代码定义了一个基础字号和一个行高比例，并使用 ceil 函数将行高比例转换为像素值。这样可以确保行高是一个整数，避免像素取整导致的布局问题。

LESS 中变量和函数是提高 CSS 可维护性和重用性的重要工具。通过使用变量和函数，我们可以避免重复编写相同的代码，减少出错的可能性。在实际开发中，我们应该根据具体的需求和场景，灵活地使用 LESS 中的变量和函数，提高开发效率和代码质量。

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