使用scss+mixin整理你的媒体查询代码

·  阅读 670
使用scss+mixin整理你的媒体查询代码

本文由团队成员 BingLee1994 撰写,已授权涂鸦大前端独家使用,包括但不限于编辑、标注原创等权益。

前言

做后台页面的同学一定体会不到做前台页面的痛苦,尤其是像官网类,产品介绍这种门面网站,她代表着公司的素质和实力,因为用户了解一个公司总是先打开一个公司的官网,因此官网页面不允许出现丝毫bug,哪怕是像素级别的。

所以官网页面的代码中css可能较多,甚至可能多于js,那么再加上pc, pad, mobile三端的响应式css代码,就会导致后期维护成本增加,很有可能不知怎么的页面某个css属性突然被覆盖了,导致页面跨掉了,因为如果不好好维护,那么海量的css代码特别容易藏污纳垢,是滋生bug的好地方。

今天分享一个很久以前自己写的小工具帮助你整理媒体查询代码。

示范

我这个代码的思路是:在一个css选择器里一次性写全她所有的三端的媒体查询代码,当然也有人喜欢:在一个媒体查询里写全所有css选择器属于当前媒体的代码,这两个哪个好哪个坏没法比较,适合自己的才是最好的。

实际使用起来就像下面这样,写四行,第一行是属性名,剩下三行每行代表一个设备的媒体查询代码

.cardList {
  display: flex;
  align-items: stretch;

  @include responsiveProps(
    (margin, flex-wrap, color),
    (32px 0, nowrap,    #121314), //用于pc
    (24px 0, nowrap,    #4D85FF), //用于pad
    (20px 0, wrap,      #4D85FF), //用于mobile
  )
}
复制代码

编译完之后会像下面这样:


.cardList {
  display: flex;
  align-items: stretch;
}
@media screen and (min-width: 1024px) {
  .cardList {
    margin: 32px 0;
    flex-wrap: nowrap;
    color: #121314;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .cardList {
    margin: 24px 0;
    flex-wrap: nowrap;
    color: #4D85FF;
  }
}
@media screen and (max-width: 767px) {
  .cardList {
    margin: 20px 0;
    flex-wrap: wrap;
    color: #4D85FF;
  }
}
复制代码

这样借助scss mixin可以自动帮我把代码整理到对应的媒体查询里,不仅仅省去了大量代码,而我们只需要在一处进行管理即可,不用在海量代码里四处搜寻,越少的代码意味着更好的维护。

可以搭配原生css变量吗?

必须可以,就像下面这样:

.cardList {
  --accent-color: #121314;
  --my-grid-col-size: 1;
  --my-grid-gutter: 24px;
  --single-row-height: 128px;

  display: grid;
  grid-template-columns: repeat(var(--my-grid-col-size), auto);
  grid-auto-rows: var(--single-row-height);
  gap: var(--my-grid-gutter);
  color: var(--accent-color);

  @include responsiveProps(
    (--accent-color,  --my-grid-col-size,  --my-grid-gutter, --single-row-height),
    (#121314,           4,                 24px,              128px), //用于pc
    (#4D85FF,           2,                 24px,              200px), //用于pad
    (#4D85FF,           1,                 20px,              240px), //用于mobile
  )
}
复制代码

最终编译出来如下:

.cardList {
  --accent-color: #121314;
  --my-grid-col-size: 1;
  --my-grid-gutter: 24px;
  --single-row-height: 128px;
  display: grid;
  grid-template-columns: repeat(var(--my-grid-col-size), auto);
  grid-auto-rows: var(--single-row-height);
  gap: var(--my-grid-gutter);
  color: var(--accent-color);
}
@media screen and (min-width: 1024px) {
  .cardList {
    --accent-color: #121314;
    --my-grid-col-size: 4;
    --my-grid-gutter: 24px;
    --single-row-height: 128px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .cardList {
    --accent-color: #4D85FF;
    --my-grid-col-size: 2;
    --my-grid-gutter: 24px;
    --single-row-height: 200px;
  }
}
@media screen and (max-width: 767px) {
  .cardList {
    --accent-color: #4D85FF;
    --my-grid-col-size: 1;
    --my-grid-gutter: 20px;
    --single-row-height: 240px;
  }
}
复制代码

原生css变量节省css代码,而且让css代码可读性大大增强,强烈推荐使用(如果不兼容IE11)。

设计思路

这里借助了mixin的数组特性,将媒体查询代码以数组形式传入,通过循环和下标取出不同设备的css值,然后放在媒体查询里。

有一点需要注意,同级选择器,靠后的代码优先级高

整个工具思路比较简单,就不赘述了,直接贴代码,这里没有做非空判断,感兴趣的同学可以再重构下,希望能够助你开发:

$mobile-size: 768px;
$pad-size: 1024px;
$pc-size: 1025px;
$max-size: 1440px;

@mixin forMobile {
  @media screen and (max-width: ($mobile-size - 1px)) {
    @content;
  }
}

@mixin forPad {
  @media screen and (min-width: $mobile-size) and (max-width: ($pad-size - 1)) {
    @content;
  }
}

@mixin forPC {
  @media screen and (min-width: $pad-size) {
    @content;
  }
}

@mixin forWidenPC {
  @media screen and (min-width: $max-size) {
    @content;
  }
}

@mixin responsiveProp($propName, $valPC, $valPad, $valMobile) {
  @include forPC {
    #{$propName}: $valPC;
  }

  @include forPad {
    #{$propName}: $valPad;
  }

  @include forMobile() {
    #{$propName}: $valMobile;
  }
}

@mixin responsiveProps($propNames, $valsPC, $valsPad, $valsMobile) {
  @include forPC {
    @for $i from 1 through length($propNames) {
      $propName: nth($propNames, $i);
      $valPC: nth($valsPC, $i);

      #{$propName}: $valPC;
    }
  }

  @include forPad {
    @for $i from 1 through length($propNames) {
      $propName: nth($propNames, $i);
      $valPad: nth($valsPad, $i);

      #{$propName}: $valPad;
    }
  }

  @include forMobile() {
    @for $i from 1 through length($propNames) {
      $propName: nth($propNames, $i);
      $valMobile: nth($valsMobile, $i);

      #{$propName}: $valMobile;
    }
  }
}

复制代码

如果你有更多使用css技巧,欢迎随时讨论!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改