LESS 是一款 CSS 预处理器，它可以让我们在编写 CSS 代码的时候使用变量、函数、嵌套等功能。在前端开发中，我们经常需要设置字体大小和颜色，使用 LESS 可以让这个过程更加高效和灵活。
LESS 变量
在 LESS 中，我们可以使用变量来存储颜色和字体大小等属性。定义一个变量的方法是在变量名前加上 @ 符号，然后赋值。例如：
@font-size: 16px; @primary-color: #007bff;
这样我们就可以在后面的代码中使用 @font-size 和 @primary-color 这两个变量了。
控制字体大小
在 CSS 中，我们可以使用 font-size 属性来设置字体大小。在 LESS 中，我们可以使用变量来代替具体的数值。例如：
h1 {
font-size: @font-size;
}这样，h1 元素的字体大小就会被设置为 @font-size 变量中存储的数值，也就是 16px。
除了使用变量，我们还可以使用 LESS 的函数来计算字体大小。例如，如果我们想让 h2 元素的字体大小是 h1 元素字体大小的一半，可以这样写：
h2 {
font-size: (@font-size / 2);
}这里使用了 LESS 的除法运算符 /，计算出的结果是 8px。
控制颜色
在 CSS 中，我们可以使用 color 属性来设置字体颜色。在 LESS 中，我们可以使用变量或者直接使用颜色值。例如：
h1 {
color: @primary-color;
}
h2 {
color: #dc3545;
}这样，h1 元素的字体颜色就会被设置为 @primary-color 变量中存储的颜色值，而 h2 元素的字体颜色则直接使用了一个颜色值。
除了使用变量和颜色值，我们还可以使用 LESS 的函数来计算颜色。例如，如果我们想让 h3 元素的字体颜色是 h1 元素字体颜色的亮度降低一半，可以这样写：
h3 {
color: darken(@primary-color, 50%);
}这里使用了 LESS 的 darken 函数，第一个参数是颜色值，第二个参数是降低的亮度百分比。计算出的结果是一个比 @primary-color 变量颜色暗一半的颜色值。
总结
使用 LESS 可以让我们在前端开发中更加高效和灵活地控制字体大小和颜色。通过定义变量、使用函数等方式，我们可以让代码更加易于维护和修改，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dfda211886fbafa4d094f8