제가 설정한 과정을 정리해 둡니다.

굳이 SASS를 쓰는 이유

#

순수 CSS는 페이지가 조금만 늘어나도 금세 지저분해집니다. SASS를 쓰면 변수, 중첩 규칙, 믹스인, 함수를 쓸 수 있어서 색상이나 공통 레이아웃 정의를 여기저기 복붙하지 않고 한곳에 모아둘 수 있습니다. Hugo 사용자에게 제일 반가운 점은, Hugo Pipes가 SCSS를 알아서 컴파일해 준다는 것. 별도의 빌드 도구도, 워처 스크립트도 필요 없습니다.

작업하는 동안 열어두면 좋은 페이지 두 곳:

• SASS 공식 문서
• Hugo의 SCSS/SASS 지원 문서

설정하기

#

1. assets 디렉토리 준비

#

Hugo는 프로젝트 루트의 assets 폴더를 찾기 때문에, 그 위치에 폴더를 만들거나 옮겨 주세요. resources 폴더 안에 두고 싶다면 config.toml에서 경로를 알려주면 됩니다.

assetDir = "resources/assets"

2. sass 폴더 만들기

#

assets 안에 sass라는 폴더를 만듭니다. SCSS 파일은 전부 여기에 둡니다.

3. 진입점 파일 추가

#

sass 폴더 안에 main.scss를 만듭니다. Hugo가 컴파일하는 파일이 바로 이것이니, 동작 확인 겸 SCSS 코드를 조금 넣어 봅시다.

// assets/sass/main.scss

// 변수
$primary-color: #3498db;

// 믹스인
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 스타일
body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

4. 템플릿에 연결

#

head.html 파셜에서 컴파일된 스타일시트를 불러와 압축합니다.

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

여기 적은 파일명이 실제 진입점(main.scss)과 일치하는지만 확인하면 됩니다.

스타일 파일 쪼개기

#

프로젝트가 커지면 SCSS를 파셜로 나누고 main.scss에서 임포트하세요.

// assets/sass/_variables.scss
$primary-color: #3498db;

// assets/sass/_mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// assets/sass/main.scss
@import "variables";
@import "mixins";

body {
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

정말 이게 전부입니다. 네 단계면 끝나고, 빌드할 때마다 Hugo가 스타일을 다시 컴파일해 줍니다. 에셋 파이프라인과 한바탕 씨름할 각오였는데, 허무할 만큼 순순히 돌아가더군요.