[SCSS] SCSS 스타일 저장하기

이번 프로젝트에서 scss를 처음 도입해봤는데 써보니 styled-component보다 너무 편하고 코드 가독성도 더 좋은 것 같다(개인적인 의견)

퍼블리셔로 근무할 때 css로 작업을 많이 했었어서 그런가 styled-component보다 익숙하고 styled-component는 마크업을 작성할 때도 스타일 이름으로 태그를 작성해야되서 마크업의 전체적인 구조가 한눈에 안 들어왔었는데(이건 내가 초보라서 그럴 수도 있음) scss는 class이름을 주면 되서 구조도 잘 파악되서 좋았다.

css와는 다르게 부모 클래스 선택자를 모두 작성하지 않고 중첩하여 작성할 수 있어서 너무너무 편하고 코드도 깔끔한것 같다. 

그리고 가장 편했던 기능은 mixin 기능이다. 함수처럼 css로도 동적으로 이미지를 적용할 수 있어서 너무 편리했다.

아래가 내가 프로젝트에서 적용한 mixin 기능이다.

 

@import '../_Palette.scss';

@mixin medalImg(
  $level,
  $path: '../../static/image/medal/medal_',
  $format: 'svg'
) {
  background-image: url('#{$path}#{$level}.#{$format}');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 70px;
  height: 80px;
}

#levelMedal {
  position: relative;
  width: 60px;
  height: 80px;
  top: -12px;

  & > p {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 700;
  }

  &.level1,
  &.level2 {
    @include medalImg('level1');
    & > p {
      color: $primary;
    }
  }
  &.level3,
  &.level4 {
    @include medalImg('level3');
    & > p {
      color: $secondary;
    }
  }
  &.level5,
  &.level6 {
    @include medalImg('level5');
    & > p {
      color: #ff832c;
    }
  }
  &.level7,
  &.level8 {
    @include medalImg('level7');
    & > p {
      color: #b62c1d;
    }
  }
  &.level9,
  &.level10 {
    @include medalImg('level9');
    & > p {
      color: #b43deb;
    }
  }
}

레벨마다 메달의 background-image를 다르게 적용하기 위해서 parameter로 레벨을 받고 이미지명을 통일해서 레벨만 바뀌면 이미지가 바뀌도록 적용, format은 svg로 통일이라 default 값으로 주었다.
그리고 작성한 mixin을 가져다 사용할 때는 include로 import하고 parameter를 전달하면 적용 완료! 

레벨마다 메달의 색상이 달라져서 이미지를 level별로 다르게 적용될 수 있도록 작성했다. 예전에 퍼블리셔로 근무했을 때 였더라면 javascript로 하나하나 선택자로 바꿔줘야헸을 텐데 css로 끝내버리다니 좋은 세상을 알아버렸다!