This article is written by BingLee1994, a member of the team, and we have authorized the exclusive use of doodle big front, including but not limited to editing, original annotation and other rights.

preface

Do background page classmates certainly do not experience the pain of front desk page, especially like website, product introduction this facade website, she represents the company’s quality and strength, because users understand a company is always the first to open a company’s website, so the website page does not allow any bug, even the pixel level.

Therefore, there may be more CSS in the code of the official website page, or even more than JS. Then, coupled with the responsive CSS code of PC, pad and mobile, it will lead to an increase in the later maintenance cost. It is very likely that some CSS property of the page is suddenly covered, leading to the page being knocked off, because if you do not properly maintain it, Massive amounts of CSS code are particularly dirty and a good breeding ground for bugs.

Today I share a little tool I wrote a long time ago to help you organize your media query code.

demonstration

I this code idea is: in a CSS selector to write all her three end media query code at once, of course, some people like: in a media query to write all CSS selector belongs to the current media code, which two good which bad can not compare, suitable for their own is the best.

In practice, it looks like this: write four lines, the first of which is the property name, and the remaining three lines each represent the media query code for a device

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

  @include responsiveProps(
    (margin, flex-wrap, color),
    (32px 0, nowrap,    # 121314), // for PC (24px 0, nowrap,    #4D85FF), // for pad (20px 0, wrap,      #4D85FF), // for mobile)}Copy the code

After compiling, it will look like this:


.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; }}Copy the code

In this way, SCSS Mixin can automatically help me organize the code into the corresponding media query. Not only does it save a lot of code, but we only need to manage it in one place. We don’t have to search through a lot of code, and less code means better maintenance.

Can be paired with nativecssVariable?

It has to be, like this:

.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), // for PC (#4D85FF.2.24px.200px), // for pad (#4D85FF.1.20px.240px), // for mobile)}Copy the code

The final compilation is as follows:

.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; }}Copy the code

Native CSS variables save CSS code and make CSS code much more readable and are highly recommended (if not compatible with IE11).

Design ideas

Here we take advantage of the array nature of mixin, passing in the media query code as an array, fetching CSS values for different devices through loops and subscripts, and then putting them in the media query.

One thing to note about sibling selectors is that lower code takes precedence

The whole tool idea is relatively simple, I will not repeat it, directly paste the code, there is no non-empty judgment, interested students can rereconstruct, hope to help you develop:

$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; }}}Copy the code

If you have more CSS tips, feel free to discuss them!