조금 더 진보한 CSS, SCSS/SASS

CSS를 작성하다 보면 귀찮음과 어려움을 겪는다.


.view-section .section-header .sub-nav .action-button .a {
	font-size: .95em;
	transition: color .3s;
}

.view-section.write-module .section-header .sub-nav {
    background-color: royalblue;
}

.view-section.write-module .section-header .sub-nav .action-button .a {
    display: none;
}

.view-section .section-header .sub-nav .action-button .a:hover {
	color: royalblue;
}

.view-section .section-header .sub-nav .action-button .a:hover > i {
	transform: scale(.5);
}

위와 같이 부모 class 이름을 계속 입력하여 작성을 이어나가야 한다면, 추후 유지 보수 부분이나 가독성 면에서도 현저히 떨어져 코드 작성 및 수정에 어려움을 겪게 될지도 모른다.

하지만 위 CSS 코드를 아래와 같이 줄일 수 있다면 어떨까?


// sass
$royal_blue: #4169e1

.view-section 
  .section-header .sub-nav .action-button .a 
    font-size: .95em
    transition: color .3s
    &:hover 
      color: $royal_blue
      > i 
        transform: scale(.5)

  &.write-module .section-header .sub-nav 
    background-color: $royal_blue
    .action-button .a 
      display: none


// scss
$royal_blue: #4169e1;

.view-section {
  .section-header .sub-nav .action-button .a {
    font-size: .95em;
    transition: color .3s;
    &:hover {
      color: $royal_blue;
      > i {
        transform: scale(.5);
      }
    }
  }
  &.write-module .section-header .sub-nav {
    background-color: $royal_blue;
    .action-button .a {
      display: none;
    }
  }
}

중복되는 class name을 묶고 조금더 간결하고 효율적으로 작성을 할 수 있다.

SASS와 SCSS는 크게 다르지 않고 문법적인 차이라고 이해하면 편하다. 필자는 기존 CSS와 문법이 비슷한 SCSS를 사용하고 있다.

이 외 편리하고 다양한 기능을 제공하는데, 많이 사용되는 기능으로는


$theme-color: #4169e1;
$default-element-gap: 1.1em;
$font-preset: Arial, Helvetica, sans-serif;

a {
  color: $theme-color;
  margin-left: $default-element-gap;
  font-family: $font-preset;
}

위와 같이 자주 사용되는 속성 값들을 변수로 저장하여 사용할 수 있다는 것이다.

디자이너들이 넘겨주는 컬러 색상을 외우거나 어디에 메모를 해둬야 하는 이유가 사라지는 것이다.


$theme-color: #4169e1;

button {
  color: #fff;
  background-color: $theme-color;
  // button:hover
  &:hover {
    background-color: darken($theme-color, 10%);
  }
}

위 코드는 button의 background-color를 $theme-color로 설정하고,

hover시에 $theme-color에서 10% 어두운 색상으로 background-color를 변경해준다.

또한 밝은 색상을 계산해주는 lighten도 지원한다.

#4169e1 Color Hex RoyalBlue

#4169e1 color hex RoyalBlue, #4169e1 color chart,rgb,hsl,hsv color number values, html css color codes and html code samples.

https://www.color-hex.com/color/4169e1

위와 같은 페이지에서 조금 더 어두운 색상을 찾거나 하는 등의 작업이 사라지는 셈이다.


@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

@mixin은 타 프로그래밍 언어에서 흔히 볼 수 있는 Function과 비슷한 기능을 한다.

@mixin transform($property) { ... } 와 같이 제공할 옵션을 만들어 놓고난 후,

.box 안의 @include transform(rotate(30deg));로 @mixin transform에 대입되어 실행한다.

Sass: Sass Basics

Syntactically Awesome Style Sheets

https://sass-lang.com/guide

다람쥐 헌 쳇바퀴에 타고파

조금 더 진보한 CSS, SCSS/SASS