css 단위로 rem을 사용한다.

  • _variables.scss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    $browser-context: 20; // 브라우저의 기본 폰트

    @function rem($pixels, $context: $browser-context) {
      @return #{$pixels/$context}rem;
    }

    $primary-color: #FF6D70;

    @mixin pad-h ($left, $right) {
      padding-left: $left !important;
      padding-right: $right !important;
    }

    %ellipsis {
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    // 사용시
    @import "./variables";

    .page {
      &__icon-container {
        margin-top: rem(100);
        @include pad-h(rem(40), rem(40));
        color: $primary-color;
        @extend %ellipsis;
      }
    }

    @mixin을 이용한 @include의 경우는 정의된 CSS를 각각 선언해주며 @extend 공통 CSS를 만들고 추가해주는 차이가 있다.

  • _reset.scss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    html {
      height: auto;
      // 브라우저에서 사용자가 디폴트 폰트 사이즈를 변경할 수 있으므로 %로 설정한다.
      // default 16px, 환산 20px, browswer-context와 맞춰줌
      font-size: 125% !important;
    }

    @media screen and (max-width: 700px) {
      html {
        font-size: 81.3% !important; // 환산 13px;
      }
      body {
        line-height: 1.34;
      }
    }

    @media screen and (max-width: 467px) {
      html {
        font-size: 62.5% !important; // 환산 10px;
      }
      body {
        line-height: 1.34;
      }
    }

Refenrece

[css에서의 em과 %] : https://aboooks.tistory.com/142