Bắt đầu dùng Sassy CSS trong GoHugo

CSS của trang này cứ phình dần thành một tệp dài dằng dặc, lặp đi lặp lại, nên cuối cùng tôi cũng chịu chuyển nó sang SASS. Nếu bạn đang chạy một trang GoHugo thì đây là kiểu thay đổi chỉ tốn mười lăm phút, nhưng về sau lần nào đụng vào tệp CSS bạn cũng thấy xứng đáng.

Dưới đây là cách tôi thiết lập.

Sao lại dùng SASS?

#

CSS thuần sẽ bắt đầu rối khi trang web lớn hơn dăm ba trang. SASS cho bạn biến, quy tắc lồng nhau, mixin và hàm, nên những thứ như màu sắc hay các đoạn bố cục dùng chung chỉ cần đặt ở một chỗ, thay vì sao chép khắp nơi. Hay nhất với người dùng Hugo là Hugo Pipes tự biên dịch SCSS giúp bạn — không cần công cụ dựng (build tool) riêng, cũng không cần script theo dõi thay đổi (watcher).

Hai trang nên mở sẵn trong lúc làm:

• Tài liệu SASS
• Tài liệu hỗ trợ SCSS/SASS của Hugo

Thiết lập

#

1. Sắp xếp lại thư mục assets

#

Hugo tìm thư mục assets ở thư mục gốc của dự án, nên bạn hãy tạo thư mục này (hoặc chuyển thư mục đang có) ra đó. Nếu muốn để nó nằm bên trong resources, hãy khai báo cho Hugo trong config.toml:

assetDir = "resources/assets"

2. Tạo thư mục sass

#

Bên trong assets, tạo một thư mục tên là sass. Các tệp SCSS của bạn sẽ nằm ở đây.

3. Thêm tệp đầu vào (entry point)

#

Tạo tệp main.scss bên trong thư mục sass. Đây là tệp mà Hugo sẽ biên dịch, nên cứ thêm vào một ít SCSS để kiểm tra xem nó đã chạy chưa:

// assets/sass/main.scss

// Variables
$primary-color: #3498db;

// Mixin
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

h1 {
  @include center;
  color: white;
}

4. Gắn vào mẫu giao diện (template)

#

Trong partial head.html, nạp tệp CSS đã biên dịch rồi rút gọn (minify) nó:

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

Chỉ cần nhớ là tên tệp ở đây phải khớp với tệp đầu vào thật của bạn (main.scss).

Chia nhỏ mã định kiểu

#

Khi mọi thứ lớn dần, hãy tách SCSS thành các partial rồi import chúng từ 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;
}

Nói thật là chỉ có vậy thôi. Bốn bước, và Hugo sẽ biên dịch lại mã định kiểu mỗi lần dựng trang. Tôi cứ tưởng sẽ phải vật lộn với quy trình xử lý tài nguyên (asset pipeline), ai ngờ mọi thứ chạy ngon luôn.