[SCSS] mixin 사용법

서론

mixin과 function은 SCSS를 모듈화 하기 위한 가장 큰 요소라고 생각된다. 잘못 사용하면 정말 가독성이 떨어지고 어려울 수 있지만, 잘만 사용한다면 코드를 훨씬 간결하게 유지할 수 있을 것 같다. 유지 보수 면에서도 훨씬 이점이 많을 거라 생각된다. 

---

mixin이란?

: 함수와 유사한 개념 단, 함수와 동일하지 않음 (리턴값이 존재 X) 

사용법

mixin 을 선언할 때에는 @mixin 키워드를 사용한다.

사용할 때에는 @include 키워드를 사용한다.

 

예제 (매개변수가 없는 믹스인)

// 매개변수가 없는 믹스인

// 선언부
@mixin resetList() {
  margin: 0;
  padding: 0;
  list-style: none;
}

// 사용부
ul {
  background-color: yellow;
  @include resetList();
}

// CSS

/* 결과화면 */

ul {
  background-color: yellow;
  margin: 0;
  padding: 0;
  list-style: none;
}

 

예제 (매개변수가 있는 믹스인)

// 매개변수가 있는 믹스인

// 선언부
@mixin width($width, $height) {
  width: $width;
  inline-size: $width;
  height: $height;
  block-size: $height;
}

// 사용부
ol {
  font-size: 1rem;
  @include resetList();
  @include width(100px, 200px);
}

//CSS

/* 결과 화면 */

ol {
  font-size: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100px;
  inline-size: 100px;
  height: 200px;
  block-size: 200px;
}

 

옵션인자

매개변수를 옵션으로 넣을 수 있는 믹스인. 넣지 않으면 지정한 기본값을 따른다. 

//SCSS

@mixin flexBox($direction, $justify: center, $align, $padding: 20px) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
  padding: $padding;
}

.flexContainer {
  @include flexBox(row, center, center);
}

//CSS

/* 결과 화면 */

ol {
  font-size: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100px;
  inline-size: 100px;
  height: 200px;
  block-size: 200px;
}

 

키워드 인자

믹스인을 호출할 때 매개변수 순서대로 인자를 전달하는 방법 외에도 키워드를 통해 직접 접근이 가능하다.

//SCSS
.notification {
  @include position(absolute, $top: 20px, $right: 20px, $zIndex: 100);
}

//CSS
.notification {
  position: absolute;
  z-index: 100;
  top: 20px;
  right: 20px;

 

키워드 인자와 옵션인자를 함께 쓰면 디폴트로 주고 싶은 건 적지 않고 키워드로 직접 접근하여 믹스인을 사용할 수 있다.