Less (二) —— 基础语法：开启极简高效的 CSS 之旅

2023-12-16 22:16:33

Less 的变量

Less 变量允许我们定义一系列通用的样式，在需要的时候去调用，这样在修改的时候只需要修改全局的变量就可以了，十分方便。

规则：

Less 变量以 @ 作为前缀。
不能以数字开头。
不能包含特殊字符。

变量的声明和使用

// 声明变量
@primary-color: #337ab7;
@font-family: "Helvetica", "Arial", sans-serif;

// 使用变量
.btn {
  color: @primary-color;
  font-family: @font-family;
}

这样，我们就定义了一个 @primary-color 变量，它的值为 #337ab7，并且将它应用到了 .btn 类的颜色属性上。我们还定义了一个 @font-family 变量，它的值为 "Helvetica", "Arial", sans-serif，并且将它应用到了 .btn 类的字体属性上。

Less 的混合

Less 的混合可以将定义好的 class A 作为另一个 class B 的父类，这样 class B 就可以继承 class A 的所有属性。

规则：

Less 混合以 . 作为前缀。
不能以数字开头。
不能包含特殊字符。

混合的声明和使用

// 声明混合
.mixin-btn {
  color: #337ab7;
  font-family: "Helvetica", "Arial", sans-serif;
  border: 1px solid #ccc;
  padding: 5px 10px;
}

// 使用混合
.btn {
  .mixin-btn;
}

这样，我们就定义了一个 .mixin-btn 混合，它包含了一系列通用的样式。然后，我们就可以在 .btn 类中使用 .mixin-btn 混合，这样 .btn 类就可以继承 .mixin-btn 混合的所有属性。

Less 的扩展

Less 的扩展可以将一个选择器的样式应用到另一个选择器上。

规则：

Less 扩展以 & 作为前缀。
不能以数字开头。
不能包含特殊字符。

扩展的声明和使用

// 声明扩展
.btn {
  color: #337ab7;
  font-family: "Helvetica", "Arial", sans-serif;
  border: 1px solid #ccc;
  padding: 5px 10px;
}

// 使用扩展
a.btn {
  & {
    background-color: #f5f5f5;
  }
}