소개

HTML이나 CSS를 조금이라도 걸린 분이라면 알겠다고 생각합니다만, CSS를 쓰고 있을 때

중첩으로 쓸 수 있을까?

변경시 여러 부분을 변경하는 것이 번거롭습니다 ...

사용하고 싶은 곳이있다

코멘트를/**/로 둘러싸는 것이 귀찮은 ...

이런 생각을 한 적이 없습니까?

실은 이것들이 Sass(SCSS)로 간단하게 해결하는 것입니다! !

Sass와 SCSS란?

Sass는 Syntactically Awesome Stylesheets의 약자입니다.
스스로 Awesome(훌륭하다)라고 하는 굉장한 자신감이네요(웃음)
Sass와 SCSS의 차이점을 간단히 말하면 Sass는 들여 쓰기, SCSS는 중첩을 사용하여 CSS를 쉽게 작성할 수 있습니다.
이번에는 내가 사용하는 SCSS를 소개합니다.

중첩으로 쓰자.

실제로 ↓ 같은 것을 만들면

CSS는 다음과 같습니다.

css

ul {
  width: 100px;
  background-color: #4d747e;
  padding: 20px;
  list-style: none;
}

ul li {
  font-size: 24px;
  color: #fff;
}

ul li.second {
  color: #e24350;
}

ul li:hover {
  background: #55c500;
}

ulul li그럼 SCSS를 보자 ♪

scss

ul {
  width: 100px;
  background-color: #4d747e;
  padding: 20px;
  list-style: none;
  li {
    font-size: 24px;
    color: #fff;
    &.second {
      color: #e24350;
    }
    &:hover {
      background: #55c500;
    }
  }
}

이렇게 반복을 줄일 뿐만 아니라 부모와 자식 관계를 알기 때문에 매우 편리합니다.
단, SCSS에서는 ul li.second ul li:hover 등은 &.second

변수를 사용해 보자.

이 CSS는 보통 써도 간단합니다만,

css

h1 {
  color: #e66317;
}
p {
  color: #e66317;
}

SCSS로 쓰면 이런 느낌이 듭니다.

scss

$text_color: #e66317;
h1 {
  color: $text_color;
}
p {
  color: $text_color;
}

이것은 간단한 예이므로 별로 혜택은 없습니다만, &:hover 의 색을 바꾸는 것만으로 다른 색을 바꿀 수 있다고 하는 것은 나중에 10개라든지 바꾸지 않으면 안 되었을 때에 편리합니다.

댓글을 쓰자.

& 는 아니고 $text_color 로 코멘트가 될거야! (했어!)
라고 말할 뿐입니다 (하지만 수수하게 다행입니다)

마지막으로

SCSS(Sass)에는 아직도 편리한 기능이 많이 있습니다만, 이번은 이쪽으로 끝나겠습니다.
이것을 보고 SCSS(Sass) 사용해 주시면 기쁩니다!