在GoHugo里用上Sassy CSS

这个站点的CSS不知不觉长成了一个又长又重复的大文件，我终于下决心迁到SASS。如果你也在用GoHugo建站，这件事花你十五分钟，之后每次改样式都在回本。

下面是我的设置过程。

为什么要用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;
}

为什么要用SASS#

动手设置#

1. 准备assets目录#

2. 建一个sass文件夹#

3. 添加入口文件#

4. 接进模板#

把样式拆开#