What is scss?

As we all know, page style is controlled by CSS, scss is an extension of CSS and provides a more powerful future, such as functions, etc. Later we will use the function future.

What is responsiveness

Most of the time, our pages only run on one device, web, mobile or desktop, but what do we do if we want to run on two devices at the same time? Responsiveness means writing code to match different platforms

What expectations do we have for CSS to meet our needs for developing responsive pages?

Now , we have learned scss and responsive, let me think about what we want ?

• It should include all devices
• It can render different contents on different devices by passing parameters

let us get started!!

1.first, create a scss file, for example , the name is responsive.scss, that will include our responsive function

/* different media size */
$s: 375px;
$m: 768px;
$l: 1024px;
$xl: 1280px;

/* responsive function */

@mixin responsive($width-list) {
  @each $width in $width-list {
    @if $width == $s {
      // 320 ~ 767 mobile
      @media only screen and (max-width: ($m - 1px)) {
        @content;
      }
    } @else if $width == $m {
      // 768 ~ 1023 tablet ipad
      @media only screen and (min-width: $m) and (max-width: ($l - 1px)) {
        @content;
      }
    } @else if $width == $l {
      //  1024 - 1279 desktop
      @media only screen and (min-width: $l) and (max-width: ($xl - 1px)) {
        @content;
      }
    } @else {
      // > 1280 PC
      @media only screen and (min-width: $xl) {
        @content;
      }
    }
  }
}

2. import this above scss file into your specific scss file

3. Use the scss responsive function to render different style

For example, there has two div box, boxA,boxB, it should arrange vertically on mobile and horizontally on desktop.

// in react jsx file
import style from "./index.scss";
<div className={style.box}>
  <div className={style.boxA}></div>
  <div className={style.boxB}></div>
</div>;

// index.scss
@import "./responsive.scss";
.box {
  display: flex;
  @include responsive(($s, $m)) {
    flex-direction: column;
  }
}

That is it, that is how to use scss to develop responsive pages .