쿠키런 소식 페이지 만들기 - [4] Scss 적용하기

Sass [Scss]

CSS를 사용하는 것은 정말 쉽지만, 프로젝트의 규모가 커짐에 따라 불필요한 선택자의 남발이 발생하는 등 아쉬운 상황이 많았습니다. 이런 애로사항 때문에 CSS의 문법과 기능을 확장한 전처리기(Preprocessor)라는 것들이 등장했습니다. 전처리기에는 Sass, Less, Stylus 등이 있는데, Sass가 많이 사용되고 있습니다. 그래서 본 시리즈에서는 프로젝트에 Sass를 적용해 볼 예정입니다.

Sass(Syntactically Awesome Style Sheet)는 문법적으로 정말 뛰어난 스타일 시트라고 합니다. 얼마나 뛰어나길래 이런 이름을 가지고 있는 걸까요? 한 번 CSS와 Sass의 문법을 비교해 봅시다.

/* test.css */
ul {
  display: flex;
}

ul li {
  margin-right: 0.625rem;
  list-style: none;
}

/* test.sass */
ul
  display: flex;
  li
    margin-right: 0.625rem;
    list-style: none;

두 스타일 코드는 동일한 코드이며, Sass 쪽이 훨씬 간결해 보입니다. 하지만 기존 CSS 문법에 익숙해진 개발자들에게는 Sass가 좋다고는 해도 뭔가 아쉬웠습니다. 그래서 현재는 Scss라는 표기법을 추가하여, CSS를 사용하듯이 작성할 수 있게 지원하고 있습니다.

/* test.scss */
ul {
  display: flex;
  li {
    margin-right: 0.625rem;
    list-style: none;
  }
}

저 역시 Scss가 친숙하기에 Scss로 작성한 스타일 시트를 프로젝트에 적용해 보겠습니다. Scss를 사용하면 부모-자식 간의 중첩을 간결하게 표현할 수 있고, 일반적인 프로그래밍 언어에서 지원하는 반복문, 조건문, 그리고 함수 등의 유용한 문법들도 사용할 수 있기에 더욱 효율적인 스타일링이 가능합니다.

전처리기는 CSS가 동작하기 전에 사용하는 기능이며, 실행을 위해 전용 트랜스파일러가 필요합니다.

트랜스파일러 설치

뒷부분에서 웹팩과 함께 사용할 수 있도록 바벨처럼 전용 로더를 설치할 예정이지만, Scss 파일을 직접 컴파일해서 확인해보고 싶은 분들을 위해 트랜스파일러의 설치 과정과 사용 방법을 설명합니다.

먼저 NPM 패키지 매니저를 이용해 sass를 설치해 주세요.

$ npm install -D sass

설치가 끝났다면 테스트용 Scss 파일을 원하는 위치에 작성하고 package.json에 트랜스파일 스크립트를 추가합시다. 예제에서는 테스트 파일을 [./asset/scss] 경로 아래에 작성했습니다.

// package.json
{
  ...
  "scripts": {
    "build": "webpack",
    "transpile": "babel asset/js -d transpile",
    "transpile:scss": "sass asset/scss/style.scss:asset/scss/style.css"
  },
  ...
}

추가한 스크립트를 npm run으로 실행했을 때, 다음과 같이 트랜스파일되면 정상적으로 진행된 것입니다.

Syntax

함께 만들었던 CSS를 Scss로 다시 작성하면서 문법을 하나씩 알아보는 시간을 가져봅시다. 본문에는 Scss로 다시 작성하는 과정 전체가 아닌 일부만 가지고 설명할 예정이기에, 여기서 소개하는 문법을 바탕으로 각자 느낌있게 변경해 보도록 합시다 😎

중첩 (Netsing)

Scss는 중첩 관계를 블록으로 구분해 보다 간결한 표현이 가능합니다.

/* _main.scss */
.header {
  padding: 6rem 0;
  color: #fff;
  text-align: center;
  background: #000;

  /* .header__logo와 동일합니다. */
  &__logo {
    display: block;
    max-width: 140px;
    margin: 0 auto;
  }

  &__title {
    padding-top: 2rem;
    font-size: 3rem;
  }

  &__description {
    padding-top: 1rem;
    /* font-size: 2.2rem과 동일합니다. */
    font: {
      size: 2.2rem;
    }
  }
}

게다가 부모-자식간의 중첩 관계를 표현할 때, CSS에는 없었던 부모 참조 연산자(&)를 이용해 부모 선택자의 이름을 치환하여 사용 가능합니다. 그리고 font-나 margin-과 같이 연관 속성(font-family, font-size 등)이 많은 경우, 이 또한 중첩으로 표현할 수 있습니다.

변수 (Variable)

Scss는 $(달러) 기호로 시작하는 문자열로 변수를 선언할 수 있습니다.

/* _variable.scss */
$tablet-max-width: 1023px;
$mobile-max-width: 767px;
$padding: 1rem;

공통적으로 사용되는 값이 있다면 변수로 만들어 재사용하는 것을 추천합니다. 그리고 Scss의 변수는 블록 스코프 별로 유효 범위가 다르기 때문에 스코프마다 같은 이름의 변수가 있더라도 서로 값을 덮어쓰지 않습니다. 만약 전역 스코프에 같은 이름을 가진 변수가 있는데, 이 값을 덮어쓰고 싶다면, 새로 선언한 변수의 값 뒤에 !global 키워드를 붙여 주세요.

저는 변수 관리가 용이하도록 변수들만 따로 모아 _variable.scss라는 파일에 정리했습니다.

믹스인 (Mixin)

믹스인은 작성한 스타일 코드를 재사용할 수 있는 문법입니다.

/* _flex.scss */
@mixin flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex-direction($direction: row) {
  -webkit-flex-direction: $direction;
  -moz-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

@mixin으로 작성한 스타일은 @include로 가져올 수 있습니다. 믹스인은 스타일을 중복해서 사용해야 하는 경우, 대표적으로 CSS 벤더 프리픽스(Vendor Prefix)를 작성할 때 사용하면 좋습니다. 아직 정식 명세가 아닌 CSS는 브라우저마다 지원 여부가 다르기 때문에, 스타일을 적용할 때 벤더 프리픽스를 함께 적어야 합니다. 하지만 매순간마다 모든 프리픽스를 작성하는 작업은 비효율적이기에, 믹스인으로 재사용되는 부분만 만들어 두면 효율적인 스타일링이 가능합니다.

믹스인을 사용할 때 키워드 앞에 @을 붙인 것을 확인할 수 있는데, @가 붙는 문법들을 Sass에서는 at-rules라 부르며 조건문(@if), 반복문(@for), 함수(@function, @return) 등 많은 규칙들이 있습니다.

분할 (Partial) & 가져오기 (Use)

스타일을 용도(초기화, 변수, 특정 화면)에 따라 각각의 파일로 분할하면 관리가 용이해집니다. 분리한 파일의 이름 앞에 _(언더스코어)를 붙이면, 이들은 partial이라 불리는 파일이 됩니다. partial은 다른 파일에서 가져오는 시점에 트랜스파일되지 않고, 가져온 파일 안에서 일괄적으로 트랜스파일됩니다.

partial 파일을 가져올 때는 @use를 사용하며 확장자는 스킵해도 됩니다.

/* style.scss */
@use 'variable';
@use 'base';
@use 'flex';
@use 'main';

/* _main.scss */
@use 'variable';
@use 'flex';

.content {
  /* display: flex; */
  @include flex.flex;
  @include flex.flex-direction(row);

  width: 100%;
  max-width: 1024px;
  margin: auto;
  flex: 1 0 600px;
  background: #594d46;
}

...

@media screen and (max-width: variable.$table-max-width) {
  ...
}

style.scss 파일을 중심으로 트랜스파일할 예정이기에 해당 파일에서 모든 partial을 가져왔고, _main.scss에서는 내부에서 _flex.scss에 작성한 믹스인을 사용하기 때문에 추가적으로 가져와 사용했습니다. 쿠키 뉴스 프로젝트에서는 이 정도 문법만 가지고 활용했는데, 만약 더 많은 문법을 알아보고 싶은 분들은 공식 문서를 참조해 주세요!

영문서가 조금 불편한 분들께는 Heropy님의 Sass(SCSS) 완전 정복을 추천합니다 😊

Bundling

웹팩과 함께 사용하기

바벨과 동일하게 Scss 역시 웹팩과 함께 사용하기 위해서는 관련 로더를 설치해야 합니다.

$ npm install -D sass-loader

설치를 마쳤으면 웹팩 설정의 로더 부분에 다음 내용을 추가해 주세요.

// webpack.config.js

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      ...
    ],
  },
  ...
};

use에 나열된 로더는 오른쪽에서 왼쪽 순서로 실행되며, style-loader를 통해 최종적으로 스타일 요소가 됩니다. 설정까지 완료했다면 main.js에서 CSS를 불러오는 부분을 Scss 파일을 불러오게 변경하고 찐! 마지막인 빌드를 진행하도록 합시다.

최종 결과

이 명령도 이제는 많이 친숙해졌죠? 다음 명령으로 빌드를 진행해 주세요 😆

$ npm run build

빌드를 하고 dist 디렉토리에 생성된 index.html 파일을 열면 다음의 결과를 확인할 수 있습니다.

개발 도구를 적용하는 단계에서는 디자인적인 변화가 있지는 않습니다. 하지만 프로젝트는 더욱 알차게 변했고 한 층 더 멋있어졌습니다. 지금까지 본문 3개에 걸쳐 웹팩, 바벨, 그리고 Scss를 적용해 봤습니다. 이 외에도 코드에서 잠재적인 오류를 찾아 주는 ESLint나 코드를 깔끔하게 정리해 주는 Prettier 등의 포매터 등 많은 개발 도구를 추가적으로 적용해 볼 수 있습니다.

길지 않은 단편의 시리즈였는데, 어떻게 쿠키 뉴스를 만들면서 개발 도구가 조금은 익숙해 지셨나요? 아직도 복잡하고 어렵게 느껴지더라도 괜찮아요. 앞으로도 직접 만져보고 적용해 보면서 익숙해지면 되니까요. 그렇게 되면 이후에는 필요할 때 손쉽게 적용할 수 있으실 거예요. 다음에도 제가 공부한 것, 그리고 경험한 것을 바탕으로 더욱 알차고 재밌는 함께 해보기 시리즈를 작성해 보겠습니다. 감사합니다!

완성된 쿠키 뉴스 프로젝트는 Git 저장소에서 확인 가능합니다 ❤️

Series

• 쿠키런 소식 페이지 만들기 - [1] 화면 만들기
• 쿠키런 소식 페이지 만들기 - [2] 웹팩 적용하기
• 쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기
• 쿠키런 소식 페이지 만들기 - [4] Scss 적용하기