LESS 是一种 CSS 预处理器，在日常的前端开发中广泛应用。它可以帮助我们在 CSS 中实现更加复杂的功能，比如变量、混合、继承等等，同时也可以让我们在编写 CSS 时拥有更加灵活和简洁的语法。在本文中，我们将探讨如何使用 LESS 编写自适应和移动优化 CSS。
1. 使用变量
LESS 中支持使用变量，可以通过 @ 符号来定义变量，将一些常用的颜色、尺寸等值赋给变量，在编写样式表时使用变量来代替具体的数值。这样不仅可以减少代码的重复率，也可以提高代码的可读性和可维护性。
例如：
@primary-color: #2f75b5;
@border-color: #ccc;
.header {
background-color: @primary-color;
border-bottom: 1px solid @border-color;
}通过定义了 @primary-color 和 @border-color 两个变量，我们可以在 .header 类中分别引用这两个变量，从而实现了颜色的统一管理。
2. 使用混合
混合（Mixin）是 LESS 中的一种特殊语法，可以将一些常用的样式复用起来，避免重复的代码。混合定义的方式类似于变量，使用 . 符号定义，然后在需要的地方通过 . 符号引用即可。
例如：
-- -------------------- ---- ------- ----------- - --------------- ----- -------- --- - ------- - ------------ ----------------- -------- ------ ----- -
在上面的代码中，我们定义了一个 .disabled 混合，它包含了两个样式属性：pointer-events 和 opacity。然后，在 .button 类中通过 .disabled() 引用该混合，实现样式属性的继承和复用。
使用混合和变量可以有效地减少 CSS 代码的重复性，提高代码的可读性和可维护性。
3. 使用媒体查询
媒体查询可以帮助我们实现 CSS 样式的自适应。在 LESS 中，可以通过媒体查询嵌套的形式来实现不同屏幕大小的样式控制。
例如：
-- -------------------- ---- -------
-- ----
----------- ------
----------- ------
----------- -------
-- -------
---------- -
------- ------
------ ----------- ----------- -
------- ------
-
------ ----------- ----------- -
------- ------
-
-其中，@media 表示媒体查询语句，括号内指明了针对屏幕宽度的条件，可以设置 min-width 和 max-width。在上面的代码中，我们定义了三个屏幕大小的变量，然后在 .component 类中通过嵌套式的媒体查询来实现不同尺寸下的高度控制。
4. 使用 REM 单位
REM 是一种相对单位，其值相对于根元素的字体大小来计算。在移动端开发中，使用 REM 能够更好的实现响应式布局。在 LESS 中，可以定义一个根元素的字体大小变量，然后通过公式 px / root-size 来计算 REM 的值。
例如：
-- -------------------- ---- ------- ---------------- ----- ---- - ---------- ---------------- - ---------- - ---------- ------ -
在上面的代码中，我们定义了 @font-size-root 为根元素的字体大小，然后通过 html 元素来设置根元素的字体大小。.container 类中使用 font-size: .8rem 来设置容器的字体大小为根元素字体大小的 80%。
使用 REM 单位可以帮助我们实现自适应布局，在移动优化中非常常用。
5. 总结
通过本文的介绍，我们了解了 LESS 中变量、混合、媒体查询和 REM 等特性的使用方法。这些特性可以有效地帮助我们实现自适应和移动优化的 CSS 样式。在实际开发中，我们可以综合应用这些特性，编写更加简洁、灵活、可读性强的 CSS 样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e78ce6f6b2d6eab3319bfd