下面是我的设置过程。

为什么要用SASS

#

纯CSS只要页面稍微多一点就开始乱。SASS提供变量、嵌套规则、mixin和函数，颜色、常用布局这些东西可以集中放在一处，不用到处复制粘贴。对Hugo用户来说最省心的一点是：Hugo Pipes自带SCSS编译，不需要额外的构建工具，也不用跑什么监听脚本。

干活时值得开着的两个页面：

• SASS官方文档
• Hugo的SCSS/SASS支持文档

动手设置

#

1. 准备assets目录

#

Hugo会去项目根目录找assets文件夹，所以在根目录新建（或把现有的挪过去）。如果想把它放进resources里，就在config.toml里告诉Hugo位置：

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这个partial里，加载并压缩编译好的样式表：

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

只要确认这里的文件名和你的实际入口文件（main.scss）一致就行。

把样式拆开

#

项目变大之后，可以把SCSS拆成多个partial文件，再在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都会重新编译样式。我本来做好了跟资源管线大战一场的准备，结果它一次就跑通了。