LESS 中如何使用变量-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它可以扩展 CSS 语法，引入变量、函数和操作符等特性，使得 CSS 更加灵活和易于维护。其中变量是一个非常重要的特性，可以帮助我们减少重复的代码，提高开发效率。下面就来介绍如何在 LESS 中使用变量。

定义变量

在 LESS 中，定义变量非常简单，只需要使用 @ 符号加上变量名和赋值即可：

@primary-color: #337ab7;
@secondary-color: #5cb85c;
@link-color: @primary-color;

上述代码定义了三个变量，其中 @link-color 的值是 @primary-color，也就是将一个变量赋值给另一个变量。在LESS中，变量名不需要加引号，而赋值的表达式也只需要用一个冒号表示。

使用变量也非常简单，只需要在 CSS 中使用变量名代替原来的值即可，例如：

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

a {
  color: @link-color;
}

上述代码中用到了之前定义的三个变量，分别代表了页面主颜色、辅助颜色和链接颜色，可以在任何 CSS 选择器中使用它们。

除了简单的变量赋值外，LESS 还支持各种变量操作，包括算术运算、颜色运算和字符串运算等。下面来介绍一些常用的变量操作：

在 LESS 中可以对数字类型的变量进行加减乘除等运算，例如：

@base-font-size: 14px;
@line-height: @base-font-size * 1.5;

上述代码中，@line-height 的值是 @base-font-size 的 1.5 倍，这里的乘号使用的是 *。

在 LESS 中还可以对颜色类型的变量进行运算，例如：

@color1: #ff0000;
@color2: #00ff00;
@color3: @color1 + @color2;

上述代码中，@color3 的值实际上是两个颜色值相加的结果，即 #ff00ff，可以看出 LESS 支持颜色值的加法运算。

在 LESS 中还可以对字符串类型的变量进行运算，例如：

@prefix: "http://example.com/";
@url: @prefix + "file.zip";

上述代码中，@url 的值是 @prefix 和 "file.zip" 拼接起来的，即 http://example.com/file.zip。

变量是 LESS 中一个非常重要的特性，可以帮助我们减少重复的代码，提高开发效率。在使用变量时，需要注意变量的作用域和变量操作的方式，例如变量名不需要加引号，而加减乘除等运算符号也不同于 CSS 的语法。掌握了 LESS 中的变量，可以使 CSS 更加灵活和易于维护。

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