LESS 可以让你写出更加优雅和方便的 CSS 代码，同时 LESS 还支持全局变量和 mixins 的使用。在这篇文章中，我们会探讨如何添加全局变量和 mixins 到 LESS 文件中，以及如何使用它们来帮助我们更好地写出模块化的代码。
设置全局变量
设置全局变量有助于我们的LESS代码更加模块化，同时也可以让我们在样式文件中快速修改相同颜色的值。在LESS中，创建全局变量时需要使用 @ 符号，如下所示：
--------------- --------
这将创建一个全局变量 @primary-color，我们现在可以在 LESS 文件中使用它来引用相应的值，如下所示：
- -
------ ---------------
-这段代码将使链接元素的字体颜色变为 #1abc9c，而不是手动键入该颜色值，这样可以让我们的代码更加易于维护和修改。
设置 Mixins
Mixins 是一个可以重复使用的样式块，它可以在一个或者多个选择器中使用。通过 mixins，我们可以将样式块封装在一起，即使将来需要更改，也可以使更改变得更加容易。在 LESS 中，创建 mixins 非常简单，它使用与变量相同的语法：
---------------- --------- ---- -
-------------- --------
---------------------- --------
------------------- --------
-上面的代码创建了一个名为 .rounded-corners 的 mixins。该 mixins 使用 border-radius 属性和三种前缀，其缺省值为 5px。我们现在可以像这样在样式表中使用它：
---- -
-----------------
-这意味着我们可以不用重复地输入多个不同的 CSS 样式，而仅仅是传递 mixins 的名称即可使用样式块。对于 mixins 中设置的所有属性，都会在编译时插入样式块中。
引入全局 LESS 文件
如果你有一些全局的样式和变量，那么你需要在所有的LESS文件中，引入它们。你可以在一个独立的 LESS 文件中编写所有的变量和 mixins，然后将它们用 @import 指令引入到您的项目中。例如：
-- ----------- --
--------------- --------
-- ----------------------------------------
------------- -
-------------- ----
---------- -----
------------ ----
--------------- ----------
--------------- -----
-
-- --------- --
------- --------------
-- -- ------
----- -
--------------
----------------- ---------------
------ ------
-我们在 main.less 文件中引入 global.less 文件，并在样式规则中使用 mixins 和全局变量，使得样式使用起来更方便、更具模块化。
总结
如何设置全局变量和 mixins 是 LESS 必须掌握的一项技能。全局变量能让你更好地处理有共同特性的 CSS 属性，同时 mixins 可以让你的代码重复使用，从而让你更快地开发新的样式。希望这篇文章对你有所启发，做为一名前端开发人员，我相信善于掌握这些技巧，会减轻我们工作的难度，同时让我们写出更加优雅的代码！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a22aa3add4f0e0ffa389ab