최근 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을 비교해보자.