Module CSS Use Mixin Include SCSS

💡 Mixin, Include 사용으로 중복되는 CSS 코드를 줄이기 위해 SCSS at-rule을 Module CSS에서 어떻게 사용하는지 알고싶다.

• Module
  CSS 빌드 시간에 고유한 이름으로 변환하여 파일 간 중복 클래스가 사용 가능하며, 로컬 스코프로 제한됩니다.
• SCSS
  CSS의 불필요한 선택자 남용, 연산 기능의 한계, 구문의 부재 등의 문제점을 해결하고 at-rule을 이용해 mixin, include 등의 유용한 추가 기능을 사용할 수 있습니다.

1. Sass Install

npm install sass

2. Scss 파일 생성 및 작성

// src/app/mixins.scss

@mixin flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-h-center{
  display: flex;
  align-items: center;
}

@mixin flex-w-center{
  display: flex;
  justify-content: center;
}

3. Module Css + Scss (@use)

// src/app/ui/main.module.scss
@use 'src/app/mixins';

.headerWrap .menuWrap{
    @include mixins.flex-h-center;
    margin: 0 36px;
}