使用 Sass 之更高级的媒体查询

最新推荐文章于 2024-09-26 11:25:27 发布

「已注销」

最新推荐文章于 2024-09-26 11:25:27 发布

阅读量84

点赞数

文章标签： sass 媒体前端 css

本文链接：https://blog.csdn.net/joueu/article/details/128628195

版权

之前一直使用Hugo Giraudel提供的方法来写媒体查询。

大概是这样的：
先定义一系列断点，

$breakpoints: (  'xs': 'only screen and ( min-width: 480px)',  'sm': 'only screen and ( min-width: 768px)',  'md': 'only screen and ( min-width: 992px)',  'lg': 'only screen and ( min-width: 1200px)',) !default;

然后定义mixin:

// _mixins.scss
@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);

  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}

使用的时候这样写：

.element {
  color: hotpink;

  @include respond-to(sm) {
    color: tomato;
  }
}

最终输出的结果是这样的：

.element {  color: hotpink;}

@media (min-width: 768px) {
  .element {    color: tomato;  }
}

前期用起来如鱼得水，媒体查询不依赖于具体数值，而是变量，这样当需求更改，导致媒体查询数值变化的时候，我们只需要改$breakpoints中的值，而不必查找、替换。并且使用@include可以使我们的代码维护容易。

但是随着项目逐渐壮大，问题也随着出现。

比如，我需要定义移动端retina屏幕使用二倍的背景图，需要怎么做？
新增加一个断点，然后使用即可。

$breakpoints: (  ...  'xs-retina'  : ( max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),);

这时候就出现小问题了，如果页面很复杂，需要新增很多断点，那么可能会出现组合爆炸，造成$brekpoints的子项很多很多，除了会影响sass编译速度之外，维护起来也会更加麻烦。

Sass媒体查询应该是这样

动态，可定义，可以随意增加断点
简洁，自然的语法，可以使用 <=,>=, >,< 符号(←_←)比如@include media(">minWidth")=,>
可以自由组合，临时定义断点，可以组合多个断点，也可以临时自定义断点，比如@include media(">tablet", "<1280px")< code="">1280px")<>

如果你也同意，可以尝试下Eduardo Bouças和Hugo Giraudel的开源作品@include-media