在 LESS 中如何实现全局 CSS 样式
LESS 是一种 CSS 预处理器，通过引入变量、混合（Mixin）、继承、函数等等对 CSS 进行拓展，提供了更加简洁高效的方式编写 CSS，大大提高了 CSS 的复用性和开发效率。在 LESS 中，如何实现全局 CSS 样式呢？
- 使用变量
在 LESS 中，可以使用变量来定义一些全局 CSS 样式，比如颜色、字体等。可以先在一个全局变量的文件中定义这些变量，然后在需要使用的 LESS 文件中引入即可。例如：
变量文件 global-variables.less：
@primary-color: #007bff; @success-color: #28a745; @warning-color: #ffc107; @danger-color: #dc3545; @font-size: 14px; @font-family: Helvetica, Arial, sans-serif;
需要使用这些变量的 LESS 文件：
-- -------------------- ---- ------- ------- ------------------- -- - ------ --------------- ---------- ----------- ------------ ------------- - ------------ - ----------------- --------------- ------ ----- - ------------ - ----------------- --------------- ------ ----- - ------------ - ----------------- --------------- ------ ----- - ----------- - ----------------- -------------- ------ ----- -
这样，就可以实现全局的颜色和字体样式了。
- 使用 Mixin
除了使用变量，还可以使用 Mixin 来定义一些全局 CSS 样式。Mixin 是 LESS 中的一个特性，可以将一段 CSS 样式封装起来，然后在需要使用的地方进行调用。比如，在全局样式文件中定义一个 reset 样式：
.reset {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}然后在需要重置样式的元素中调用 Mixin：
h1 {
.reset;
}这样就可以实现全局的 reset 样式了。
- 使用伪类
在 LESS 中，还可以使用伪类来实现全局 CSS 样式。比如，为所有链接添加下划线：
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}这样，所有链接在悬停时都会出现下划线。
总结
通过使用 LESS 中的变量、Mixin、伪类等特性，可以实现全局 CSS 样式的定义和使用。这样不仅可以提高开发效率，还可以保证整个项目的样式风格的统一性。但是需要注意的是，全局样式应该尽量少，否则会影响网页的性能，同时也会增加代码的维护难度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4bc6cb5eee0b525c8f9f6