재사용 가능한 미디어 쿼리 및 스타일 범위 지정을 위한 SCSS 혼합

간단한 SCSS부터 시작하겠습니다. 여기서는 BEM 모달 CSS 이름 지정을 사용합니다. 참조( http://getbem.com/naming/ )

.as-facts {
  &-header {
    align-items: center;
    display: flex;
    flex-direction: column;

    &-image {
      display: flex;
      height: 200px;
      width: 200px;
    }
  }
}

이 SCSS는 아래 CSS로 변환됩니다.

.as-facts-header {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.as-facts-header-image {
  display: flex;
  height: 200px;
  width: 200px;
}

이제 모바일 및 landscapePhone 화면에 대한 이미지를 숨겨야 하는 사용 사례가 있습니다. untilMediatype 믹스인을 사용하자

.as-facts {
  &-header {
    align-items: center;
    display: flex;
    flex-direction: column;

    &-image {
      display: flex;
      height: 200px;
      width: 200px;

      @include untilMediaType("landscapePhone") {
        display: none;
      }
    }
  }
}

이것은 다음으로 변환됩니다.

.as-facts-header {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.as-facts-header-image {
  display: flex;
  height: 200px;
  width: 200px;
}
@media only screen and (max-width: 576px) {
  .as-facts-header-image {
    display: none;
  }
}

이제 "as-facts-header-image"클래스가 있는 모든 요소에 .as-facts-header-image가 추가됩니다. .as-facts 내부의 요소에만 as-facts-header-image를 적용해야 하는 사용 사례가 있다고 가정해 보겠습니다. 범위 혼합을 사용하여 범위를 지정해 보겠습니다.

.as-facts {
  @include scope() {
    &-header {
      align-items: center;
      display: flex;
      flex-direction: column;

      &-image {
        display: flex;
        height: 200px;
        width: 200px;

        @include untilMediaType("landscapePhone") {
          display: none;
        }
      }
    }
  }
}

이것은

.as-facts .as-facts-header {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.as-facts .as-facts-header-image {
  display: flex;
  height: 200px;
  width: 200px;
}
@media only screen and (max-width: 576px) {
  .as-facts .as-facts-header-image {
    display: none;
  }
}

이제 이 mixin @scope를 사용하여 모든 구성 요소에 적용되는 스타일에 대해 걱정할 필요가 없습니다. 범위는 .as-facts입니다.

이제 재사용 가능한 믹스인을 살펴보겠습니다.

@use 'sass:map';

$breakpoints: (
  "phone": 320px,
  "landscapePhone": 576px,
  "tablet": 768px,
  "desktop": 992px,
  "largeDesktop": 1200px,
  "xlDesktop": 1400px,
);

@mixin untilMediaType($type) {
  @media only screen and (max-width: map.get($breakpoints, $type)) {
    @content;
  }
}

@mixin scope() {
  & & {
    @content;
  }
}