Less 将规则集传递给Mixins

在 Less 中，Mixins 是一种将一组 CSS 属性规则集传递给另一个选择器的技术。这可以让你更高效地重用代码，避免重复，并且使你的样式表更加简洁和易于维护。

使用 Mixins

基本用法

使用 Mixins 的基本方式是将一个类名作为属性添加到另一个选择器中。例如，如果你有一个名为 .button 的 Mixin，你可以将其应用到其他任何需要相同样式的元素上。

// www.javascriptcn.com code example
.button {
  padding: 10px;
  border-radius: 5px;
  background-color: #007BFF;
  color: white;
}

.link {
  .button; // 应用 .button 的所有属性
}

编译后的 CSS 可能如下所示：

.link {
  padding: 10px;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
}

参数化 Mixins

Less 支持参数化的 Mixins，这意味着你可以根据需要向 Mixins 传递参数，就像你在函数中传递参数一样。

// www.javascriptcn.com code example
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box {
  width: 100px;
  height: 100px;
  .border-radius(10px); // 传递参数
}

编译后的 CSS 可能如下所示：

.box {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

带默认值的 Mixins

你还可以为参数设置默认值，这样在调用时如果未提供该参数，则会使用默认值。

// www.javascriptcn.com code example
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box1 {
  width: 100px;
  height: 100px;
  .border-radius(); // 使用默认值
}

.box2 {
  width: 200px;
  height: 200px;
  .border-radius(10px); // 传递参数覆盖默认值
}

编译后的 CSS 可能如下所示：

// www.javascriptcn.com code example
.box1 {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.box2 {
  width: 200px;
  height: 200px;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

包含 Mixins

Less 还允许你通过 :include 关键字来包含 Mixins，从而在输出 CSS 时保留 Mixins 的名称。

// www.javascriptcn.com code example
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box {
  width: 100px;
  height: 100px;
  &:include .border-radius(10px);
}

编译后的 CSS 可能如下所示：

.box {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

使用 Mixins 来创建变量

你也可以使用 Mixins 来定义变量，然后在其他地方引用这些变量。

// www.javascriptcn.com code example
.button-styles(@color) {
  padding: 10px;
  border-radius: 5px;
  background-color: @color;
  color: white;
}

.button-primary {
  .button-styles(#007BFF);
}

.button-secondary {
  .button-styles(#6C757D);
}

编译后的 CSS 可能如下所示：

// www.javascriptcn.com code example
.button-primary {
  padding: 10px;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
}

.button-secondary {
  padding: 10px;
  border-radius: 5px;
  background-color: #6c757d;
  color: white;
}

通过这些示例，你应该能够理解如何在 Less 中有效地使用 Mixins。这不仅使你的代码更加模块化和可维护，还提高了代码的复用性。你可以根据项目需求灵活运用 Mixins，以实现更高效、优雅的 CSS 编写方式。