LESS 使用 @mixin 实现媒体查询技巧分享-JavaScript中文网-JavaScript教程资源分享门户

移动设备越来越普及，为了适应不同设备屏幕的大小，我们需要使用媒体查询来进行适配。但是，如果媒体查询的代码比较长，那么就会显得非常冗长，减少代码的可读性。那么，如何使用 LESS 中的 @mixin 来解决这个问题呢？

什么是 @mixin

在 LESS 中，@mixin 是一个可以帮助我们减少重复代码的功能。通过定义一个 @mixin，我们可以把相同的代码抽象封装起来，在需要使用的时候进行调用。这样一来，我们就可以大幅缩短代码长度，提高代码的可读性和维护性。

LESS 中实现媒体查询

LESS 提供了一个 @media 规则，可以让我们根据屏幕大小，自适应调整样式。比如以下代码：

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

上面的代码意思是，如果屏幕宽度小于等于 600px，那么就把整个页面的字体大小设置为 14px。但是这种写法有一个缺陷：如果我们需要在多个地方使用媒体查询，那么代码会变得非常冗长。

为了提高代码的可读性，我们可以使用 @mixin 来定义媒体查询。比如以下代码：

// javascriptcn.com 代码示例
#media(@media) {
  @media @media {
    &:extend(.clearfix);
    @content;
  }
}

// 使用示例
@media screen and (max-width: 600px) {
  #media(screen and (max-width: 600px)) {
    body {
      font-size: 14px;
    }
  }
}

上面的代码中，#media 是我们定义的 @mixin 名称，@media 是一个参数，用来接收媒体查询表达式。当我们使用 #media(@media) 的时候，它会自动生成一个媒体查询规则，然后把你要执行的内容传递给这个媒体查询规则。这样一来，我们就可以做到媒体查询的复用。

LESS 中更灵活的媒体查询

除了上面的方式之外，我们还可以把媒体查询写入到变量中，从而更好的实现代码复用。比如以下代码：

// javascriptcn.com 代码示例
@mobile: ~"screen and (max-width: 768px)";

@media @mobile {
  h1 {
    font-size: 20px;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  @media @mobile {
    h1 {
      font-size: 16px;
    }
  }
}

上面的代码中，我们定义了一个 @mobile 变量，然后将媒体查询表达式包含在其中。然后，我们可以通过 @media @mobile 来调用这个媒体查询，来达到代码复用的效果。

总结

通过上述介绍，我们可以得出以下结论：

LESS 中的 @mixin 功能可以帮助我们大幅简化代码重复的工作；
变量可以更进一步的实现代码复用的功能；
合理的使用媒体查询，可以让我们更好地适用于不同的设备屏幕。

在开发中，我们通过灵活使用上述技巧，可以更好地进行前端开发，提高代码的可读性和维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f75b50f6b2d6eab3fd0433