Sass 받아들이기, 당신이 그냥 CSS로 그만 코딩해야 하는 이유.

원글 : Embracing Sass: Why You Should Stop Using Vanilla CSS

원작자 : MARCELO MAZZA

내가 처음 Scss와 다른 CSS Preprocessors에 대해 들었을 때는 그다지 흥미롭게 들리진 않았던 걸로 기억한다. “CSS 하나만 해도 잘 되는데 왜 굳이 다른게 필요하단 말이지? 그냥 안쓸래, CSS로만 해도 충분히 균형잡힌 코드를 짤 수 있으니까, Scss같은건 아마 CSS를 제대로 모르는 사람을 위한 것일거고, 난 CSS를 충분히 아니까 필요없어. ” 라고 생각했으며 그리고 실제로 SCSS와 같은 Preprocessors의 사용을 피해왔었다. 어떤 프로젝트 때문에 꼭 사용해야만 하는 순간이 올 때까지는.

최근까지 나는 어떤 프로젝트 때문에 다시 Vanilla CSS를 사용해야 했는데, 그제서야 나는 내가 얼마나 SCSS의 덕을 보고 있었는지 알게 되었다.

그럼 굳이 왜 Sass를 쓰는 걸까?

잘 정리된 코드: @Import

내가 앞서 말한 프로젝트에서 규모가 상당한 비즈니스 사이트의 CSS를 손 봐야 했는데, 해당 사이트의 CSS 길이가 무려 7184줄이나 되는 방대한 량의 코드였다. 그리고 이러한 문제점이 왜 당신이 Sass를 써야하는지 말해준다. 왜냐면 Sass는 당신의 CSS를 정리해주고 모듈화까지 해준다. 이말은 즉슨 엄청나게 방대할 수 있는 CSS파일을 관리하기 쉽게 여러개의 파일로 나누어 관리 하는 작업을 보다 쉽게 만든다.

@import 태그가 나온지는 상당히 되었지만 잘못된 정보역시 계속해서 돌고 있다. @import 태그를 쓰면 css파일을 불러올 때 마다 HTTP Request를 보낸 다는 것이다. 그리고 이는 웹사이트 기능에 악영향을 미친다는 이야기가 있다.

허나 이는 사실이 아니다. Scss에서 @import를 통해 CSS를 불러올 때 모든 CSS파일은 하나의 파일에 담긴다. 그렇기에 우리는 그 하나의 파일만을 위한 HTTP Request를 보내고 해당 파일을 다운받는것이다.

반복작업 줄이기 : Variable

Sass를 칭찬하는 글을 보면 아마 대부분 Sass가 가진 변수라는 기능을 거론하며 시작할 것이다. 가장 많이 쓰이는 용도가 바로 색깔과 관련된 코드인데 아래와 같은 형식으로 쓰인다.

$brand: #226666;
$secondary: #403075;

body {
background: $secondary;
}

.logo {
color: $brand;
}

$로 시작하는 부분이 Sass의 변수이며 추후 CSS로 컴파일 할 때 변수로 쓰인 부분이 모두, 당신이 선언한 것처럼 적용되어 나올 것이다.

이러한 기능들이 얼마나 받은 코드량을 줄일지 상상해보라, 다른 프로젝트에 같은 코드를 쓰는데 색깔을 하나씩 다 바꿀것인가? SCSS에서는 변수하나만 바꿔주면 끝이다. 변수의 유용함은 색깔에만 국한되어 있는 것이 아닌 폰트 스타일, 미디어 쿼리등에서도 적용된다.

보다 깔끔한 코드 : Nesting.

Nesting이 아마도 두번째로 많이 거론되는 Sass의 특징일 것이다. Sass를 쓰다가 다시 일반 CSS코드를 뜯어보면 너무 어수선해서 보기가 힘들다고 느껴진다. Nesting을 사용하기 위해 아래 코드와 같이 괄호사이에 클래스명을 삽입해 주시라. 그러면 나머지는 Sass가 알아서 컴파일 해줄 것이다.

.header {
margin: 0;
padding: 1em;
border-bottom: 1px solid #CCC;

&.is-fixed {
position: fixed;
top: 0;
right: 0;
left: 0;
}

.nav {
list-style: none;

li {
display: inline-block;

a {
display: block;
padding: 0.5em;
color: #AA8439;
}

}

}

}

반복작업을 더 줄이기 : Mixins 과 Extends.

CSS에서의 반복작업은 피해기 힘들때가 많다, 그렇기에 이와 관련된 사항을 조금 더 파보기로 하자. Sass의 Mixins과 Extends은 작업자로 하여금 반복작업을 줄여주는 아주 유용한 Sass의 특징이다. Mixins을 사용하면 CSS속성들을 매개변수와 같이 사용할 수 있어 Stylesheet 어디에든 돌려 쓸 수 있다.

예를 들어 버튼이 들어있는 박스를 하나 만들고자 한다고 가정해보자. 그리고 해당 박스의 보더와 버튼 배경의 색깔을 동일화 하고자 한다면 Vanilla CSS로 코드로 짯을 때 코드의 모습은 아래와 같을 것이다.

.box {
  border: 2px solid red;
}

.box .button {
  background: red;
}

만일 색깔을 바꾸고자 한다면 어떨까? 보더와 함께 버튼의 색상역시 바꾸어야 할것이다. 코드가 별로 많이 않을때는 문제가 되지 않지만 바꿔야 할게 많다면 그것역시 시간을 잡아먹고 귀찮은 일이 될 것이다.

.box-alt {
  border: 2px solid blue;
}
.box-alt .button {
  background: blue;
}

하지만 Sass의 Maxin을 이용하면 코드는 아래와 같을 것이다.

@mixin box($borderSize, $color) {

  border: $borderSize solid $color;

  .button {
    background: $color;
  }

}

자, 어떤가? Variables과 Maxin을 사용하면 CSS를 짤때 반복훈련을 대폭적으로 줄어든다. Extends 역시 비슷한 맥락이다, 특정한 속성을 가져와 다른 선택자에서도 동일한 속성을 쓰게 만들어 주는 기능이다.

아래와 같은 박스를 하나 만들었다고 가정해보자.

.box {
  margin: 1em;
  padding: 1em;  
  border: 2px solid red;
}

그리고 두개의 박스가 같은 속성을 가지되 보더 색상만 변경하고자 한다. 그러면 코드는 아래와 같을 것이다.

.box-blue {
  @extend .box;
  border-color: blue;
}
.box-red {
  @extend .box;
  border-color: red;
}

정말 편하지 않은가? 그러면 Sass의 특징이 이게 다냐고? 그렇지 않다. 글이 너무 장황해 질까봐 거론하지 않는 부분도 있다. Sass의 많은 특징과 기능들이 아직 당신이 발견하고 사용해주길 기다리고 있다.

지금 당장 Sass페이지로 가서 배우며 사용해보라, 장담하는데 후회하지 않을 것이다. 물론 Sass말고 LESS나 Stylus와 같은 다른 선택지도 있다, 하지만 개인적으로 지금 존재는 CSS preprocessors중에선 Sass가 최고인것 같다. 내가 하는 말이 의심스러운가? 얼른 Sass로 코딩해보시라, 그러면 내가 하는 말을 이해하게 될 것이다.