업데이트:

최근 Jekyll 테마를 만들면서 SCSS로 스타일링을 하는 중인데, 알면 알수록 재밌는 도구라고 느낀다.

최근 삽질을 한 코드

p 요소에 색상을 줄 수 있는 mixin을 만들어볼 것이다.

1
<p>text</p>
1
2
3
4
5
6
7
8
9
10
11
12
@mixin test($color: null) {
   @if $color {
      color: $color;
   } @else {
      color: red;
   }
}

p { @include test(); }

// 컴파일
p { color: red; }

당연하지만 mixin의 인자가 비워져 있으면 에러를 뱉으며 컴파일조차 되지 않는다. 때문에 인자가 비어있어도 기본 스타일 선언을 적용시킬 수 있는 방법을 검색해서 위와 같이 mixin을 작성한 것임. 이렇게 비효율적으로 짜놓고 잘 만들었다고 좋아라했었는데…

더 효율적으로 작성해보자

1
2
3
4
5
6
7
8
@mixin test($color: red) {
   color: $color;
}

p { @include test(); }

// 컴파일
p { color: red; }

조건문 없는 간결한 코드. 인자가 비워져 있을 경우 color 속성의 기본값은 red가 적용된다.

아래 codepen을 보며 두 mixin을 비교해보자.

See the Pen XWmMLvX by sel (@selucky) on CodePen.