이 사이트의 CSS가 어느새 길고 반복투성이인 파일 하나로 자라 버려서, 드디어 SASS로 옮겼습니다. GoHugo로 사이트를 운영하고 있다면, 15분만 들이면 그 뒤로 스타일시트를 만질 때마다 본전을 뽑는 종류의 작업이죠.
제가 설정한 과정을 정리해 둡니다.
굳이 SASS를 쓰는 이유#
순수 CSS는 페이지가 조금만 늘어나도 금세 지저분해집니다. SASS를 쓰면 변수, 중첩 규칙, 믹스인, 함수를 쓸 수 있어서 색상이나 공통 레이아웃 정의를 여기저기 복붙하지 않고 한곳에 모아둘 수 있습니다. Hugo 사용자에게 제일 반가운 점은, Hugo Pipes가 SCSS를 알아서 컴파일해 준다는 것. 별도의 빌드 도구도, 워처 스크립트도 필요 없습니다.
작업하는 동안 열어두면 좋은 페이지 두 곳:
설정하기#
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가 스타일을 다시 컴파일해 줍니다. 에셋 파이프라인과 한바탕 씨름할 각오였는데, 허무할 만큼 순순히 돌아가더군요.