如何设置 globale 变量和 mixins 到 LESS 文件中？

LESS 可以让你写出更加优雅和方便的 CSS 代码，同时 LESS 还支持全局变量和 mixins 的使用。在这篇文章中，我们会探讨如何添加全局变量和 mixins 到 LESS 文件中，以及如何使用它们来帮助我们更好地写出模块化的代码。

设置全局变量

设置全局变量有助于我们的LESS代码更加模块化，同时也可以让我们在样式文件中快速修改相同颜色的值。在LESS中，创建全局变量时需要使用 @ 符号，如下所示：

@primary-color: #1abc9c;

这将创建一个全局变量 @primary-color，我们现在可以在 LESS 文件中使用它来引用相应的值，如下所示：

a {
    color: @primary-color;
}

这段代码将使链接元素的字体颜色变为 #1abc9c，而不是手动键入该颜色值，这样可以让我们的代码更加易于维护和修改。

设置 Mixins

Mixins 是一个可以重复使用的样式块，它可以在一个或者多个选择器中使用。通过 mixins，我们可以将样式块封装在一起，即使将来需要更改，也可以使更改变得更加容易。在 LESS 中，创建 mixins 非常简单，它使用与变量相同的语法：

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

上面的代码创建了一个名为 .rounded-corners 的 mixins。该 mixins 使用 border-radius 属性和三种前缀，其缺省值为 5px。我们现在可以像这样在样式表中使用它：

.box {
    .rounded-corners;
}

这意味着我们可以不用重复地输入多个不同的 CSS 样式，而仅仅是传递 mixins 的名称即可使用样式块。对于 mixins 中设置的所有属性，都会在编译时插入样式块中。

引入全局 LESS 文件

如果你有一些全局的样式和变量，那么你需要在所有的LESS文件中，引入它们。你可以在一个独立的 LESS 文件中编写所有的变量和 mixins，然后将它们用 @import 指令引入到您的项目中。例如：

// global.less 文件
@primary-color: #1abc9c;

// mixin，在这里我们定义了mixins，用于添加Vanderbilt样式的特点
.vanderbilt() {
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}

// main.less 文件
@import 'global.less';

// 使用 mixins
a.btn {
    .vanderbilt();
    background-color: @primary-color;
    color: white;
}

我们在 main.less 文件中引入 global.less 文件，并在样式规则中使用 mixins 和全局变量，使得样式使用起来更方便、更具模块化。

总结

如何设置全局变量和 mixins 是 LESS 必须掌握的一项技能。全局变量能让你更好地处理有共同特性的 CSS 属性，同时 mixins 可以让你的代码重复使用，从而让你更快地开发新的样式。希望这篇文章对你有所启发，做为一名前端开发人员，我相信善于掌握这些技巧，会减轻我们工作的难度，同时让我们写出更加优雅的代码！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a22aa3add4f0e0ffa389ab