使用 LESS 编译器时要如何使用 “variables”？-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它允许开发者使用变量、函数、嵌套等特性，来更加方便地编写 CSS。其中，使用变量是 LESS 的一个重要特性，它可以让开发者定义一些常用的样式值，然后在整个项目中都可以使用这些变量，从而方便地统一管理和调整样式。

定义变量

在 LESS 中，使用 @ 符号来定义变量。例如，我们可以定义一个名为 @primary-color 的变量，来表示网站的主色调：

@primary-color: #2196F3;

上面的代码定义了一个名为 @primary-color 的变量，它的值为 #2196F3。在整个 LESS 文件中，我们都可以使用 @primary-color 来代替 #2196F3。

在 LESS 中，使用变量也很简单，只需要在需要使用变量的地方使用 @ 符号即可。例如，我们可以使用 @primary-color 来设置按钮的背景色：

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

上面的代码中，我们使用了 @primary-color 变量来设置按钮的背景色。这样，如果我们需要修改主色调，只需要修改 @primary-color 的值即可，所有使用了这个变量的地方都会自动更新。

在 LESS 中，变量有作用域的概念。默认情况下，变量的作用域是局部的，只在定义它的块级作用域内有效。例如，我们可以在一个选择器内定义一个变量：

.btn {
  @primary-color: #2196F3;
  background-color: @primary-color;
}

上面的代码中，@primary-color 变量只在 .btn 选择器内有效，它的作用域是局部的。如果我们在 .btn 外部使用 @primary-color，将会报错。

如果需要定义全局变量，可以使用 :global() 函数：

:global {
  @primary-color: #2196F3;
}

上面的代码中，我们使用 :global() 函数来定义全局变量 @primary-color。这样，在整个 LESS 文件中都可以使用 @primary-color 变量了。

除了简单的变量定义和使用外，LESS 还提供了一些变量计算的功能，可以让我们更加方便地编写 CSS。例如，我们可以使用变量计算来定义一个宽度为 50% 的元素：

@width: 100%;
.element {
  width: @width / 2;
}

上面的代码中，我们定义了一个名为 @width 的变量，它的值为 100%。然后，在 .element 选择器内，我们使用了 @width / 2 计算表达式来设置元素的宽度，最终得到的宽度为 50%。

除了基本的加减乘除运算外，LESS 还支持一些函数，例如 darken()、lighten()、saturate()、desaturate() 等，可以用来对颜色值进行计算。例如，我们可以使用 darken() 函数来计算一个较暗的颜色：

@primary-color: #2196F3;
.secondary-color: darken(@primary-color, 10%);

上面的代码中，我们使用 darken() 函数来计算一个较暗的颜色，它的参数为 @primary-color 和 10%。这样，我们就可以方便地计算出一些与主色调相关的颜色值。

使用 LESS 的变量功能可以让我们更加方便地编写 CSS，并且可以实现样式的统一管理和调整。在使用变量时，需要注意变量的作用域和计算方式，以免出现错误。同时，变量计算和函数也是 LESS 的一个重要特性，可以帮助我们更加方便地编写 CSS。

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