移动设备越来越普及，为了适应不同设备屏幕的大小，我们需要使用媒体查询来进行适配。但是，如果媒体查询的代码比较长，那么就会显得非常冗长，减少代码的可读性。那么，如何使用 LESS 中的 @mixin 来解决这个问题呢？
什么是 @mixin
在 LESS 中，@mixin 是一个可以帮助我们减少重复代码的功能。通过定义一个 @mixin，我们可以把相同的代码抽象封装起来，在需要使用的时候进行调用。这样一来，我们就可以大幅缩短代码长度，提高代码的可读性和维护性。
LESS 中实现媒体查询
LESS 提供了一个 @media 规则，可以让我们根据屏幕大小，自适应调整样式。比如以下代码：
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}上面的代码意思是，如果屏幕宽度小于等于 600px，那么就把整个页面的字体大小设置为 14px。但是这种写法有一个缺陷：如果我们需要在多个地方使用媒体查询，那么代码会变得非常冗长。
为了提高代码的可读性，我们可以使用 @mixin 来定义媒体查询。比如以下代码：
-- -------------------- ---- -------
-------------- -
------ ------ -
--------------------
---------
-
-
-- ----
------ ------ --- ----------- ------ -
------------- --- ----------- ------- -
---- -
---------- -----
-
-
-上面的代码中，#media 是我们定义的 @mixin 名称，@media 是一个参数，用来接收媒体查询表达式。当我们使用 #media(@media) 的时候，它会自动生成一个媒体查询规则，然后把你要执行的内容传递给这个媒体查询规则。这样一来，我们就可以做到媒体查询的复用。
LESS 中更灵活的媒体查询
除了上面的方式之外，我们还可以把媒体查询写入到变量中，从而更好的实现代码复用。比如以下代码：
-- -------------------- ---- -------
-------- -------- --- ----------- --------
------ ------- -
-- -
---------- -----
-
-
------ ---- ------ --- ----------------- - ------ --- ----------------- - ------ -
------ ------- -
-- -
---------- -----
-
-
-上面的代码中，我们定义了一个 @mobile 变量，然后将媒体查询表达式包含在其中。然后，我们可以通过 @media @mobile 来调用这个媒体查询，来达到代码复用的效果。
总结
通过上述介绍，我们可以得出以下结论：
- LESS 中的 @mixin 功能可以帮助我们大幅简化代码重复的工作；
- 变量可以更进一步的实现代码复用的功能；
- 合理的使用媒体查询，可以让我们更好地适用于不同的设备屏幕。
在开发中，我们通过灵活使用上述技巧，可以更好地进行前端开发，提高代码的可读性和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f75b50f6b2d6eab3fd0433