如何在 Less 中表示变量？

在 Less 中，可以用变量来表示一些常用的值，比如颜色、字体、边框等。使用变量可以让我们的 CSS 代码更加简洁、易于维护。

定义变量

可以使用 @ 符号来定义变量，变量名后紧跟着 :，后面是变量值，示例：

@primary-color: #1890ff;

引用变量

变量定义好之后，可以使用 @变量名 来引用变量，示例：

button {
  color: @primary-color;
}

使用变量运算

Less 还支持变量运算，可以使用 +、-、*、/、% 来对变量进行数值运算，示例：

@baseFontSize: 14px;
@h1FontSIze: @baseFontSize * 2;
@h2FontSize: @baseFontSize * 1.5;

h1 {
  font-size: @h1FontSize;
}

h2 {
  font-size: @h2FontSize;
}

变量作用域

在 Less 中，变量的作用域有两种：全局和局部。

全局变量

在 Less 文件的任何地方定义的变量都是全局变量，可以在整个文件中使用。

@primary-color: #1890ff;

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

a {
  color: @primary-color;
}

局部变量

局部变量只能在定义变量的块级作用域内使用，示例：

// 全局变量
@primary-color: red;

a {
  // 局部变量
  @primary-color: blue;
  color: @primary-color; // blue
}

div {
  color: @primary-color; // red
}

需要注意的是，如果在局部作用域内没有定义某个变量，就会去全局作用域中查找。

总结

使用 Less 中的变量可以让我们的 CSS 代码更加简洁、易于维护。在定义变量时要注意变量名的命名规范以及作用域的问题。