TIL15, CSS Preprocessor: SCSS!*

CSS Preprocessor 통해 스타일링 작업을 더욱 수월하게 할 수 있다. 물론, 브라우저가 이해하는 것은 CSS뿐이므로 작업한 코드를 CSS로 컴파일 해주어야 하는 중간 과정을 거쳐야 하지만, (혹은 해당 작업을 해주는 패키지를 우리의 프로젝트에 포함시켜야 하지만) Preprocessor에서 제공해주는 다양한 기능은 그러한 불편한 점을 상쇄하고도 남는다.

SASS / SCSS

가장 많이 쓰이는 Preprocessor로 sass 와 scss 가 있는데, 둘은 문법적 차이를 제외하면 동일하다. 그 문법적 차이는 js 와 python 의 차이와 거의 같은데, sass는 {} 와 ; 를 사용하지 않고 들여쓰기를 통해서 줄과 줄 사이를 구분한다.

// SASS
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px
   
   
// SCSS
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

앞으로의 프로젝트에서 나는 SCSS를 사용할 것이니, SCSS 형태의 문법으로 CSS Preprocessor에서 제공하는 기능들을 알아보자.

Variable

SCSS는 변수를 생성하여 할당할 수 있다. $ 키워드를 사용한다. 주로 공통적인 배경색과 같은 부분을 헥사코드를 외우는 대신, 훨씬 외우기 쉬운 변수명으로 대체하여 매번 헥사코드를 보러 긴 CSS파일을 뒤적이는 수고를 덜 수 있다. 오예.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

리액트 프로젝트를 하면서 제일 많이 쓰이는 형식인데, 하위 태그를 네스팅의 형식으로 보다 직관적인 모습으로 코드를 짤 수 있다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

시각적으로 좀 더 직관적인 것 말고도, 태그를 특정하는데 매우 탁월하다. 예로, 아주 깊게 위치하는 태그를 기존의 CSS 셀렉터 형식으로 특정하려면, div > span > p > img > .wrapper > .profileImage 와 같이 이름이 엄청 길어지게 된다. 그래서 보통 길게 늘어뜨리지 않고 근처의 몇개의 태그만 이용하여 특정하는데, React와 같이 모든 CSS 스타일링이 한꺼번에 렌더링 되는 환경에서는, "한 두개의 태그만" 이용하여 태그를 특정하면, 여러 컴포넌트에서 중복 특정되는 태그가 발생하여 스타일링이 겹치게 되는 불상사가 발생할 가능성이 높다.(처음 html/css 작업물을 컴포넌트에 집어넣었을 때 스타일링이 전부 꼬여서 뒤틀린 황천의 디자인이 생성되는 신기한 경험을 했다.) SCSS의 네스팅을 이용하면 셀렉터를 길게 늘여뜨리지 않아도 되므로, (단지 네스팅이 깊게 들어갈뿐) CSS가 겹쳐서 발생되는 일이 없어진다.

Modules

@import './base.scss';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

물론 임포트 기능도 지원한다. 여러 곳에서 공통적으로 사용되는 스타일링을, 예로 reset.css, 임포트 하여 다른 SCSS 파일에서 사용 가능하다.

Mixins

CSS에 함수와 같은 기능을 추가한 것.

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

변수를 넘겨, 해당 변수에 따라 다르게 결과값이 나오는 스타일링을 구현할 수 있다. 많이 쓰이지는 않는다.

Extend

변수와 비슷하다. 다만, 특정 스타일링의 묶음을 변수처럼 지정한다.

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

flex 디스플레이가 스타일링 할때 많이 쓰이는데, 이를 extend 로 미리 지정을 해주면, 여러 줄을 쓸 것을 한줄로 줄일 수 있다는 장점이 있다.

Operators

SCSS에는 연산자를 사용할 수 있다.

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

처음에 아무 언급도 없이 CSS로 먼저 작업하게 하고, 리액트 시작과 동시에 CSS가 다 멍작살나는 멘붕상황을 겪게 하고 난 뒤, CSS를 일일이 SCSS로 댕고생 하면서 옮기는 경험을 통해 그 필요성을 손수 느끼게 해준 위코드.. 수강생은 이를 기억할 것 입니다..