SCSS 재활용

SCSS 재활용

SCSS에서는 @mixin 기호를 활용하여 특정한 이름에 내용을 저장하고 @include 키워드로 해당 내용을 재활용할 수 있습니다.

또한, $ 기호를 활용한 변수를 매개변수와 인수로 넣어줌으로 재활용 기능을 사용하면서도 들어가 있는 내용을 수정하면서 사용할 수 있습니다. e.g. box($size) 이는 JavaScript의 함수를 선언하고 호출하는 방식과 유사하다고 볼 수 있습니다.

이뿐만 아니라 추가적으로 기본값을 설정해줄 수도 있습니다. box($size: 100px)와 같이 : 뒤에 값을 명시해주면 해당 값이 기본값으로 지정되며 별도로 괄호 내에 값을 지정하지 않고 box로만 명시해도 기본값으로 값을 나타내게 됩니다.

마지막으로 box($size: 80px, $color: tomato)처럼 매개변수가 여러가지일 때에 키워드 인수를 활용할 수 있습니다. 인수로는 위에 명시한 매개변수의 순서대로 입력하는 것이 원칙이지만 $color: green와 같이 키워드 인수를 활용할 수 있습니다. 자세한 예는 아래에서 알아봅시다.

1. SCSS

@mixin box($size: 80px, $color: tomato) {
    width: $size;
    height: $size;
    background-color: $color;
}
.container {
    @include box(200px, red);
    .item {
        @include box($color: green);
    }
}

.box {
    @include box;
}

2. CSS(Compiled)

.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  width: 80px;
  height: 80px;
  background-color: green;
}

.box {
  width: 80px;
  height: 80px;
  background-color: tomato;
}