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 stylesheet 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, rule lồng nhau, mixin và function, nên những thứ như màu sắc hay các đoạn layout dùng chung chỉ cần đặt ở một chỗ, thay vì copy-paste 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 build tool riêng, cũng không cần script watcher.
Hai trang nên mở sẵn trong lúc làm:
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 project, 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 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 template#
Trong partial head.html, load stylesheet đã biên dịch rồi 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 entry point thật của bạn (main.scss).
Chia nhỏ style#
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 style mỗi lần build. Tôi cứ tưởng sẽ phải vật lộn với asset pipeline, ai ngờ mọi thứ chạy ngon luôn.