프로젝트를 진행하면서 Sass를 활용해보자는 방향으로 Sass를 학습하면서 사용해보았다. 하지만 익숙하지 않아서 Sass를 CSS처럼 사용했다. 중간에 변수처리를 했지만 빠진 부분도 있어서 리팩토링을 진행하면서 mixin과 variables 파일을 적극 활용해보기로 했다.

CSS와 Sass의 차이

프로젝트에서 CSS 대신 Sass를 사용했다. CSS의 경우 변수나 중첩 기능이 없어서 반복되는 값, 반복되는 코드를 복사해서 사용해야 한다. Sass는 변수와 중첩이 가능하고 믹스인을 사용해서 재사용 가능한 코드 블록을 만들 수 있다.
Variables는 $ 기호를 사용하여 정의한다. 정의된 변수는 동일한 값을 반복해서 사용할 수 있다.
Mixin은 스타일 시트에서 재사용 가능한 코드 블록을 정의하는 기능이다. 함수와 비슷한 동작이지만 스타일 규칙을 생성하는데 사용한다.

'_variables.scss'
$enabled-color: #635CA5;
$white-color : #ffffff;

$theme: (
    light: (
    	background-color: rgba(0, 0, 0, 0.5),
        enabled-btn-color: $enabled-color,
        btn-font-color: $white-color,
        ...
    ),
    ...
}

'_mixin.scss'
@function get-color($key, $type: 'light') {
    @each $name, $color in map-get($theme, $type) {
        @if ($key == $name) {
            @return $color;
        }
    }
    @return null; // 기본값으로 null 반환
}

@mixin get-color($property, $color) {
    #{$property}: get-color($color);

    @at-root .theme-wrapper.highContrast & {
        #{$property}: get-color($color, highContrast);
    }
}

'button.scss'
.size-l, .size-m, .size-ms, .size-s {
  @include get-color(background-color, enabled-btn-color);
  @include get-color(color, btn-font-color);
}

Sass 적용하기

프로젝트를 진행하면서 Sass의 활용에 대한 지식이 부족한 상태였다. 그래서 리팩토링 기간에 _mixin.sass와 _variables.scss 리팩토링을 진행했다.

페이지에 따라 적용한 Sass 파일을 전체 살펴본 후 페이지마다 적용된 thema를 _variables.scss 파일에 넣었다. 그 외에도 동일한 변수가 있으면 variables 파일에 작성했다.
공통된 변수를 찾아 코드를 줄이는 작업 후에는 _mixin.sass를 작성했다.
_mixin.sass 파일도 동일하게 전체 파일을 살펴본 후 반복되는 코드를 정리했다. 동일한 코드는 아니지만 전체적인 틀이 같은 코드가 많아서 map-get 함수를 사용했다.
map-get은 맵에서 지정한 키에 해당하는 값을 가져오는데 사용한다.

'_variables.scss'
$warning-color-text: #EB5757;
$theme: (
	light: (
    	...
    	warning-color: $warning-color-text,
		...
    )
)
 
'_mixin.scss'
@mixin warning-message($property, $color){
    @include get-color($property, $color);
    font-size: map-get($font-sizes, "size12");
    display: none;
}

'join_membership.scss'
[class^=warning-msg] {
    @include warning-message(color, warning-color);
    margin-top: 0.375rem;
}