scss 반응형 Setting

roglog·2021년 4월 20일
0

퍼블리싱

목록 보기
3/3
  1. 기준을 정해서 변수로 값을 저장한다.
    Ex)
    $tablet = 1024px;
    $mobile = 600px;
  1. 변수를 이용하여 mixin을 만든다.
    Ex)
    @mixin desktop {
      @media (min-width: #{$tablet}) {
        @content;
      }
    }

    @mixin tablet {
      @media (min-width: #{$mobile}) and (max-width: #{$tablet - 1px}) {
        @content;
      }
    }

    @mixin mobile {
      @media (max-width: #{$mobile - 1px}) {
        @content;
      }
    }

  1. mixin을 이용하여 반응형을 코딩한다.
    Ex)
    background-color: yellow;

    @include tablet {
        background-color: red;
    }

    @include mobile {
        background-color: blue;
    }
profile
Full Stack Developer 📚

0개의 댓글