preface

When we work on PC pages, we have to deal with responsive layouts. The purpose of this article is to document a problem I have encountered in my work: how to use SASS for responsive layout.

The business scenario

Let’s say I have two divs, side by side. When the window width is less than 1000px, change to vertical. To run the environment, select the project created by the vue scaffolding.

Then create the vue file. The code looks like this:

< the template > < div class = "media_test" > < div id = "box1" > < p > this is box1 < / p > < / div > < div id = "box2" > < p > this is box2 < / p > < / div > < / div > </template> <script> export default { name: "Test" } </script> <style scoped lang="scss"> #box1 { box-sizing: border-box; width: 50%; height: 300px; display: inline-block; background-color: coral; color: white; padding: 10px; } #box2 { box-sizing: border-box; width: 50%; height: 300px; display: inline-block; background-color: mediumpurple; color: white; padding: 10px; } </style>Copy the code

The running results are as follows:

If we want to have two divs stacked next to each other below 1000px, using the media query we need to write:

@media screen and (min-width: 1000px) {#box1 {
    box-sizing: border-box;
    width: 50%;
    height: 300px;
    display: inline-block;
    background-color: coral;
    color: white;
    padding: 10px;
  }
  #box2 {
    box-sizing: border-box;
    width: 50%;
    height: 300px;
    display: inline-block;
    background-color: mediumpurple;
    color: white;
    padding: 10px; }}@media screen and (min-width: 375px) and (max-width: 999px) {#box1 {
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    background-color: coral;
    color: white;
    padding: 10px;
    font-size: 14px;
  }
  #box2 {
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    background-color: mediumpurple;
    color: white;
    padding: 10px;
    font-size: 14px; }}Copy the code

The operation results at 1000px are as follows:

Extract the common code into @mixin

However, this is obviously too verbose to write. We can extract the common code as @mixin function, pass in the parameters, and then use the parameters as criteria to choose different CSS code;

The code is modified as follows:

@mixin boxStyle ( $screenWidth) {#box1 {
    @if ( $screenWidth= =1600) {
      display: inline-block;
      width: 50%;
      height: 300px;
      font-size: 16px;
    }@else if( $screenWidth= =1000 ) {
      width: 100%;
      height: 150px;
      font-size: 14px;
    }
    box-sizing: border-box;
    background-color: coral;
    color: white;
    padding: 10px;
  }
  #box2 {
    @if ( $screenWidth= =1600) {
      display: inline-block;
      width: 50%;
      height: 300px;
      font-size: 16px;
    }@else if( $screenWidth= =1000 ) {
      width: 100%;
      height: 150px;
      font-size: 14px;
    }
    box-sizing: border-box;
    background-color: mediumpurple;
    color: white;
    padding: 10px; }}@media screen and (min-width: 1000px) {@include boxStyle( 1600 );
}
@media screen and (min-width: 375px) and (max-width: 999px) {@include boxStyle( 1000 );
}
Copy the code

This code could have been broken down again to extract the common code, but it would have been too tedious to demonstrate here.

Then there is the second method:

@media is nested in sass

In Sass, the @media tag has been processed so that it can be used just like a normal media tag. It also has the unique ability that SASS gives you — it can be nested within CSS rules. For details, see @media in sass.

As in the above example, we can write it like this:

#box1 {
  @media screen and (min-width: 1000px) {display: inline-block;
    width: 50%;
    height: 300px;
    font-size: 16px;
  }
  @media screen and (min-width: 375px) and (max-width: 999px) {width: 100%;
    height: 150px;
    font-size: 14px;
  }
  box-sizing: border-box;
  background-color: coral;
  color: white;
  padding: 10px;
}
#box2 {
  @media screen and (min-width: 1000px) {display: inline-block;
    width: 50%;
    height: 300px;
    font-size: 16px;
  }
  @media screen and (min-width: 375px) and (max-width: 999px) {width: 100%;
    height: 150px;
    font-size: 14px;
  }
  box-sizing: border-box;
  background-color: mediumpurple;
  color: white;
  padding: 10px;
}
Copy the code

The result is exactly the same as before.

conclusion

Both methods allow us to minimize code. But I haven’t decided which is better or worse yet. Let me know in the comments if you think it’s better or have any suggestions. Finally, whether it’s sass, whether it’s @Media tags, whether it’s responsive layouts. There’s so much to learn. I hope I know more and more things in the future