LESS-CSS Guards 介绍

简介

LESS-CSS Guards是一种通过使用Mixin和@when语句来实现对片段代码的精细控制的技术。顾名思义，"guard"其实是一个护卫，它是许多代码片段保护自己的方法。 当你使用时，你可以给它们提供必要的参数，它们可以在满足特定条件时才会被调用。这使得你能够写出更高效和有条理的代码，而不必额外编写多余的CSS代码。

怎么使用LESS-CSS Guards

@when 语句

@when语句也是LESS-CSS Guards的核心，它在Mixin中使用，并根据你定义的条件来判断Mixin是否应该被渲染并输出。 你可以使用@when语句来取代冗长的if/else语句。

以下是@when语句的示例：

// 声明了一个带有两个条件的Mixin
.myClass(@flag) when not (@flag = red) and not (@flag = blue) {
  color: green;
}

// 调用带有条件的Mixin
.button {
  .myClass(red);
}

// 输出成 CSS 如下：
// .button {
// 	color: green;
// }

上面的示例中，当我们调用myClass() mixin的时候，只有当我们的flag不等于red并且不等于blue时，myClass()才会被渲染并输出CSS。

实例：

// 使用@when来控制padding属性
.box(@padding: 0) when (@padding > 0) {
  padding: @padding;
}

.adjustBoxPadding {
  .box(10px)
}

// 输出成 CSS 如下：
// .adjustBoxPadding {
// 	padding: 10px;
// }

上面的示例中，我们定义了一个.box() mixin，它带有一个条件：只有当我们传入的padding值大于0时，它才会被渲染并输出CSS。在.adjustBoxPadding类中，我们传入了一个10像素的值，这样.box() mixin就会被渲染并在输出中添加了padding属性。

总结

LESS-CSS Guards是一种非常强大的技术，可以帮助你写出更好维护的CSS代码。了解如何使用@when语句并利用Mixin可以极大地简化和优化代码。