在 Less 中，保留字和系统变量是一些特殊的关键字，它们在定义样式时具有特定的含义。了解这些关键字和变量，可以帮助我们更好地编写 Less 样式代码，并且增强我们的样式表可读性和可维护性。
保留字
保留字是 Less 中用于定义样式的特殊关键字。根据定义的方式和用途，可以将 Less 的保留字分为以下几类。
变量定义关键字
Less 中的变量定义关键字包括 @import、@media、@keyframes、@namespace 等。这些关键字用于定义样式表中的变量，媒体查询，动画等。
@import
用于导入一个 Less 文件，供当前 Less 文件使用。示例代码：
@import 'reset.less'; /* 下面是使用 reset.less 样式定义的内容 */
@media
用于媒体查询，根据设备的宽度、高度、方向等条件来决定样式是否生效。示例代码：
@media screen and (max-width: 768px) {
/* 在小屏幕设备上生效 */
}@keyframes
定义动画的帧数和关键帧。示例代码：
-- -------------------- ---- -------
---------- ----- -
-- -
---------- ---------
-
--- -
---------- -----------
-
---- -
---------- ---------
-
-@namespace
用于定义一个名称空间，以避免样式选择器的冲突。示例代码：
@namespace app {
.button {
/* 定义 .app-button 样式 */
}
}混合器定义关键字
Less 中的混合器定义关键字包括 @mixin 和 @include。这些关键字用于定义一个可以在样式中多次调用的混合器，实现样式代码的复用。
@mixin
用于定义一个混合器。示例代码：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}@include
用于调用一个混合器。示例代码：
button {
@include border-radius(5px);
}函数定义关键字
Less 中的函数定义关键字包括 @function 和 calc()。这些关键字用于定义一个可以计算样式值的函数，并在 Less 中使用。
@function
用于定义一个函数。示例代码：
@function double($value) {
@return $value * 2;
}calc()
用于在样式中计算值。示例代码：
div {
width: calc(100% - 20px);
}系统变量
除了保留字，Less 还提供了一些系统变量，这些变量的值不可更改，但可以在样式中引用。
常用系统变量
常用 Less 系统变量包括：
@baseFontSize：页面字体的基准大小。@basePadding：页面元素的基准内边距。@baseColor：页面元素的基准颜色等。
示例代码
-- -------------------- ---- ------- -- ------ -- -------------- ----- ------------- ----- ----------- ----- -- ------ -- ------- - ---------- -------------- -------- ------------- ------ ----------- -
总结
Less 的保留字和系统变量是 Less 样式表的重要组成部分，通过对它们的了解，可以更方便地定义样式并实现代码的复用。在实际的开发过程中，我们应该根据具体的需求，选用合适的保留字和系统变量，撰写出优雅、高效的 Less 样式表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651caea195b1f8cacd42d3c4