动态的样式语言Less语法详解之变量与Extend

1. 变量

在Less中，我们可以使用变量来存储和重用样式属性的值。变量可以包含任何类型的值，包括颜色、长度、字符串等。

定义变量

要定义一个变量，可以使用@符号，后面跟着变量的名称和值。例如：

@primary-color: #ff0000;

使用变量

使用变量时，只需在属性值中使用@符号加上变量名称即可。例如：

h1 {
  color: @primary-color;
}

示例说明

@primary-color: #ff0000;

h1 {
  color: @primary-color;
}

在上面的示例中，我们定义了一个名为@primary-color的变量，并将其值设置为红色。然后，我们将这个变量应用到h1元素的color属性中，使其文字颜色变为红色。

2. Extend

Extend是Less中的一个功能，用于继承一个选择器的样式到另一个选择器上。这可以减少代码的重复，并使样式更易于维护。

使用Extend

要使用Extend，可以使用&符号来引用父选择器，并使用:符号后跟要继承的选择器。例如：

.button {
  background-color: #ff0000;
}

.button-primary {
  &:extend(.button);
  color: #ffffff;
}

在上面的示例中，我们定义了一个.button选择器，并设置了背景颜色为红色。然后，我们使用Extend将.button选择器的样式继承到.button-primary选择器上，并添加了一个额外的颜色属性。

示例说明

.button {
  background-color: #ff0000;
}

.button-primary {
  &:extend(.button);
  color: #ffffff;
}

在上面的示例中，我们定义了一个.button选择器，并设置了背景颜色为红色。然后，我们使用Extend将.button选择器的样式继承到.button-primary选择器上，并添加了一个额外的颜色属性。这样，.button-primary选择器将继承.button选择器的背景颜色，并添加自己的颜色属性。

以上是关于Less语法中变量和Extend的详细讲解，希望对你有帮助！