LESS 是一种 CSS 预处理器，可以使 CSS 更加易于使用和维护。CSS3 媒体查询是一个功能强大的工具，可以根据设备屏幕大小、分辨率和方向等条件为不同设备提供不同的 CSS 样式。在 LESS 中使用 CSS3 媒体查询可以使代码更加模块化、可读性更好、更容易维护。
LESS 语法
在 LESS 中，使用 @media 指令可以定义媒体查询。@media 指令后面跟着一个包含 CSS 规则的块。例如：
@media (max-width: 767px) {
body {
font-size: 14px;
}
}这个媒体查询适用于屏幕最大宽度为 767 像素的设备。当屏幕宽度小于或等于 767 像素时，body 的字体大小会变成 14px。
嵌套
在 LESS 中，可以使用嵌套结构来组织样式表的代码。嵌套结构和 @media 指令一起使用可以更好地组织 CSS 样式。例如：
nav {
ul {
@media (max-width: 767px) {
flex-direction: column;
}
}
}这个媒体查询适用于屏幕最大宽度为 767 像素的设备。当屏幕宽度小于或等于 767 像素时，nav 的 ul 子元素的排列方式会变成纵向列。
变量
在 LESS 中，可以使用变量存储 CSS 属性的值，然后在需要的地方引用。这使得代码更加模块化和易于维护。例如：
@max-width: 767px;
@media (max-width: @max-width) {
body {
font-size: 14px;
}
}这个媒体查询适用于屏幕最大宽度为 767 像素的设备。这里使用了一个变量 @max-width 存储最大宽度值，当需要用到这个值的时候可以直接引用。
混合
在 LESS 中，可以使用混合来重复使用一组 CSS 样式。混合就是一个包含一组 CSS 规则的代码块，定义了一个可重用的样式。例如：
-- -------------------- ---- -------
----------------- -
---------- ------
-
------ ----------- ------ -
---- -
-----------------
-
-这个媒体查询适用于屏幕最大宽度为 767 像素的设备。当屏幕宽度小于或等于 767 像素时，body 的字体大小会变成 14px。这里使用了一个混合 .font-size，可以传入不同的参数值来设置不同的字体大小。
示例代码
-- -------------------- ---- -------
----------- ------
--- -
-- -
-------- -----
---------------- --------------
-- -
----- - - ----
-
-
------ ----------- ----------- -
-- -
--------------- -------
-- -
----- -----
-------------- -----
-
-
-
-
----------------- -
---------- ------
-
------ ----------- ----------- -
---- -
-----------------
-
--- -
-----------------
-
-这个示例代码定义了一个 nav 元素，当屏幕宽度小于或等于 767 像素时，ul 子元素的排列方式会变成纵向列；body 的字体大小会变成 14px，nav 的字体大小会变成 18px。这里使用了变量、嵌套、混合等 LESS 的特性来组织代码，使得代码更加易于维护和升级。
总结
LESS 是一个非常强大的 CSS 预处理器，可以帮助前端开发者更加简单和方便地编写 CSS。CSS3 媒体查询是一个非常实用的工具，可以根据设备的不同提供不同的 CSS 样式。在 LESS 中使用 CSS3 媒体查询可以使代码更加易于维护，同时也可以更好地组织代码。LESS 并不是一种必须使用的技术，但它可以带来更好的协作、更好的代码可读性、更好的代码可维护性和更好的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ab89548841e98948d27ec