↓ 본문으로 건너뛰기
인재덕
  1. 게시물/

GoHugo에서 Sassy CSS 사용 시작하기

· loading · loading ·
인재덕
작성자
인재덕
A Kiwi living in Korea
목차

소개
#

SASS(Syntactically Awesome Stylesheets)는 더 깔끔하고 모듈화되며 유지 보수가 쉬운 스타일시트를 작성할 수 있게 해주는 강력한 CSS 전처리기입니다. 웹사이트에 GoHugo를 사용하고 있다면 SASS를 통합하면 개발 워크플로우를 크게 개선할 수 있습니다.

이 글에서는 GoHugo 프로젝트에서 SASS를 설정하는 방법과 이 도구를 최대한 활용하기 위한 실용적인 팁을 다룹니다.

GoHugo에서 SASS를 사용하는 이유는?
#

SASS는 변수, 중첩 규칙, 믹스인, 함수와 같은 기능으로 CSS를 확장합니다. 이를 통해 재사용 가능하고 간결한 코드를 더 쉽게 작성할 수 있습니다. GoHugo의 내장 Pipes 기능은 SASS/SCSS를 지원하여 스타일시트의 원활한 통합과 자동 컴파일을 가능하게 합니다.

주요 이점:
#

  • 변수: 색상, 글꼴, 크기와 같은 재사용 가능한 값을 저장합니다.
  • 믹스인: CSS 선언 그룹을 재사용합니다.
  • 함수: 작업을 수행하고 값을 동적으로 생성합니다.
  • 모듈성: CSS를 여러 파일로 분할하고 쉽게 가져올 수 있습니다.
  • 압축: 더 빠른 로드 시간을 위해 CSS 파일을 자동으로 압축합니다.

공식 리소스
#

GoHugo에서 SCSS 시작하기
#

GoHugo 프로젝트에서 SCSS를 설정하고 사용을 시작하려면 다음 네 가지 간단한 단계를 따르세요:

단계 1: 에셋 디렉토리 구성
#

프로젝트 루트에 assets 폴더를 만들거나 이동합니다. 또는 resources 폴더 내에 중첩하려면 config.toml 파일을 다음과 같이 업데이트하세요:

assetDir = "resources/assets"

단계 2: sass 폴더 생성
#

assets 폴더 내에 sass라는 새 폴더를 만듭니다. 여기에 SCSS 파일을 저장합니다.

단계 3: 메인 SCSS 파일 추가
#

sass 폴더 내에 main.scss라는 파일을 만듭니다. 이 파일은 스타일의 진입점 역할을 합니다. 시작하기 위해 샘플 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: HTML 템플릿 업데이트
#

head.html 부분에 SCSS 파일을 프로젝트에 통합하기 위해 다음 코드를 포함하세요:

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

코드의 파일 이름이 SCSS 진입점(main.scss)의 파일 이름과 일치하는지 확인하세요.

보너스: 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;
}

결론
#

GoHugo 프로젝트에 SASS를 통합하면 더 깔끔하고 효율적인 CSS를 작성할 수 있는 가능성의 세계가 열립니다. 몇 가지 단계만으로 SASS의 기능을 최대한 활용하고 프론트엔드 개발 워크플로우를 향상시킬 수 있습니다.

GoHugo에서 SASS를 사용하는 것에 대한 질문이나 팁이 있으신가요? 아래 댓글에서 공유해 주세요!