LESS 中常用的 Mixin 函数

LESS 是一种 CSS 预处理语言，提供了很多方便的功能，其中 Mixin 是很有用的一种函数。Mixin 实际上就是一段可以重复调用的代码片段，可以被其他样式引用。本文将介绍在 LESS 中常用的 Mixin 函数，并给出示例代码和使用建议。

1. Border-radius Mixin

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

这个 Mixin 用于设置圆角，其中 @radius 参数为圆角半径。上面的代码生成的 CSS 如下：

.border-radius {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

使用这个 Mixin 的语法如下：

.rounded {
  .border-radius(5px);
}

输出：

.rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

2. Text-shadow Mixin

.text-shadow(@shadow) {
  text-shadow: @shadow;
  -o-text-shadow: @shadow;
  -ms-text-shadow: @shadow;
  -moz-text-shadow: @shadow;
  -webkit-text-shadow: @shadow;
}

这个 Mixin 用于设置文本阴影，其中 @shadow 参数为阴影值。可以根据需要增加前缀以兼容不同浏览器。上面的代码生成的 CSS 如下：

.text-shadow {
  text-shadow: 1px 1px 1px #000;
  -o-text-shadow: 1px 1px 1px #000;
  -ms-text-shadow: 1px 1px 1px #000;
  -moz-text-shadow: 1px 1px 1px #000;
  -webkit-text-shadow: 1px 1px 1px #000;
}

使用这个 Mixin 的语法如下：

.headline {
  .text-shadow(1px 1px 1px #000);
}

输出：

.headline {
  text-shadow: 1px 1px 1px #000;
  -o-text-shadow: 1px 1px 1px #000;
  -ms-text-shadow: 1px 1px 1px #000;
  -moz-text-shadow: 1px 1px 1px #000;
  -webkit-text-shadow: 1px 1px 1px #000;
}

3. Box-shadow Mixin

.box-shadow(@shadow) {
  -moz-box-shadow: @shadow;
  -webkit-box-shadow: @shadow;
  box-shadow: @shadow;
}

这个 Mixin 用于设置盒子阴影，其中 @shadow 参数为阴影值。可以根据需要增加前缀以兼容不同浏览器。上面的代码生成的 CSS 如下：

.box-shadow {
  -moz-box-shadow: 1px 1px 1px #000;
  -webkit-box-shadow: 1px 1px 1px #000;
  box-shadow: 1px 1px 1px #000;
}

使用这个 Mixin 的语法如下：

.card {
  .box-shadow(1px 1px 1px #000);
}

输出：

.card {
  -moz-box-shadow: 1px 1px 1px #000;
  -webkit-box-shadow: 1px 1px 1px #000;
  box-shadow: 1px 1px 1px #000;
}

4. Transition Mixin

.transition(@args) {
  -webkit-transition: @args;
  -moz-transition: @args;
  -o-transition: @args;
  -ms-transition: @args;
  transition: @args;
}

这个 Mixin 用于设置 CSS3 过渡动画，其中 @args 参数为属性与时间值。可以根据需要增加前缀以兼容不同浏览器。上面的代码生成的 CSS 如下：

.transition {
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

使用这个 Mixin 的语法如下：

.button {
  .transition(all 0.5s ease-out);
}

输出：

.button {
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

结论

Mixin 函数是 LESS 中很有用的功能。通过定义常用的代码片段，可以避免重复劳动，增加代码可读性和减少出错机会。通过使用 LESS 的 Mixin 函数，可以提高前端开发效率，实现更好的代码重用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6722d83c2e7021665e0d2466