69、【Ubuntu】【Hugo】搭建私人博客（三）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

上篇 blog
【Ubuntu】【Hugo】搭建私人博客（二）

继续分析了全功能博客系统，以及零运维在线建站平台，并介绍了 Hugo 安装过程，下面继续

搭建私人博客

上篇 blog 对比了下 Hugo Standard 标准版和 Extended 扩展版的区别，其中提到了 Extended 版本额外集成了对 Sass/SCSS 编译和 WebP 图像处理等高级功能的支持，下面先介绍下这两个功能

Sass/SCSS

Sass/SCSS 编译可以看成 CSS 预处理的过程，可以让写 CSS 更轻松

CSS 负责控制网页颜色，字体，布局等样式，就像网页的化妆师，比如

css 复制代码

h1 {
  color: blue;
  font-size: 24px;
}

如果网站很大，CSS 就会变得又长又乱，改起来很痛苦，而 Sass/SCSS 是一种更聪明的 CSS 写法，支持

变量：比如定义一次主色调，全站复用，比如在 CSS 里写了很多地方用 #3a86ff（一种蓝色，表示 r：0x3a，g：0x86，b：0xff），后面想改成 #ff006e（粉色，r：0xff，g：0x00，b：0x6e），得一个个找，改，容易漏（霰弹式修改），对于 SCSS 来说，可以用 $ 定义变量，比如

css 复制代码

// 定义变量
$primary-color: #3a86ff;
$font-size-large: 24px;

// 使用变量
h1 {
  color: $primary-color;
  font-size: $font-size-large;
}

.button {
  background-color: $primary-color;
  border: 2px solid darken($primary-color, 10%); // 还能对颜色做计算！
}

编译后编程普通的 CSS 如下

css 复制代码

h1 {
  color: #3a86ff;
  font: 24px;
}
.button {
  background-color: #3a86ff;
  border: 2px solid #2a6bcc; /* 自动算出深一点的蓝 */
}

这样如果想换主题颜色，只需要改一行 $primary-color 就行

嵌套：像 HTML 结构一样写 CSS，不用重复写选择器，在 CSS 中，写父子关系很麻烦，比如

css 复制代码

.nav { ... }
.nav ul { ... }
.nav ul li { ... }
.nav ul li a { ... }
.nav ul li a:hover { ... }

而对于 SCSS，可以直接套娃写

css 复制代码

.nav {
  background: #eee;
  padding: 10px;

  ul {
    list-style: none;
    margin: 0;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: black;

        &:hover {          // & 表示"父选择器"
          color: red;
          font-weight: bold;
        }
      }
    }
  }
}

编译后可以自动展开成标准 CSS，和上面的 CSS 一模一样，这样前端写 SCSS 结构清晰，像 HTML 一样直观，不容易写错

混合（Mixin） ：可以定义样式函数，复用代码块，减少重复代码，比如很多地方要用居中显示，圆角按钮等相同样式，复制粘贴太麻烦，如果用 SCSS，就可以用 @mixin 定义，然后再用 @include 去调用，比如

css 复制代码

// 定义一个居中 mixin
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 定义一个按钮 mixin，还能传参数！
@mixin button-style($bg-color, $text-color: white) {
  background: $bg-color;
  color: $text-color;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

/* 使用 */
.hero {
  @include center; // 直接插入居中样式
  height: 100vh;
}

.primary-btn {
  @include button-style(#3a86ff); // 蓝色按钮，文字默认白色
}

.danger-btn {
  @include button-style(#ff006e, black); // 粉色按钮，文字黑色
}

这样编译后，每个 @include 都会被替换成完整的 CSS 规则，就像写函数一样写样式，避免重复，还能传参

函数：计算值，不输出 CSS，注意和 mixin 区分开，函数是用来返回一个值（比如颜色，或者数字），用于赋值，而 mixin 是输出一整段 CSS 样式，比如下面这个例子，自定义一个能让指定颜色变亮的函数，通过输入颜色，通过增加对应明度 Lightness 后，再返回增亮后的颜色

css 复制代码

@function my-brand-lighten($color) {
  @if $color == $brand-primary {
    @return lighten($color, 15%); // 主色只亮 15%
  } @else {
    @return lighten($color, 30%); // 其他颜色亮 30%
  }
}

这里使用了 SCSS 的一个内置函数 lighten($color, $amount)，作用是把一个颜色调亮一定百分比，其中

$color：表示原始颜色，比如 #333，red，rgb(50, 100, 200) 等
$amount：表示要变亮的程度，单位是百分比（%），比如 10%，20%

经过 lighten 函数调亮后，返回一个新的颜色值，格式和输入 $color 一致（一般是十六进制 #xxxxxx 或 rgb(...)），但颜色会比原来更亮

OK，经过上面的分析，可以看到，用 SCSS，比纯 CSS 好维护多了，但是浏览器并不识别 SCSS，所以需要一个工具，把 .scss 文件编译成普通的 .css 文件

Hugo 普通版：没有这个翻译工具，遇到 SCSS 直接报错
Hugo Extended 版：自带翻译工具 libsass，能自动把 SCSS 翻译成 CSS

很多现代 Hugo 主题（比如 PaperMod）就是用 SCSS 写样式的，所以必须用 Extended 版才能跑起来

Sass/SCSS 和 CSS 的关系，有点类似 C语言和汇编的关系，比如从以下几个角度

	C/汇编	SCSS/CSS
抽象层级	C（高级语言），汇编（低级语言）	Sass（高级 CSS），CSS（浏览器直接执行的底层样式语言）
可读性	C（容易编写，容易维护），汇编（很繁琐）	Sass 支持变量，嵌套，函数等，比纯 CSS 更简洁
都需要翻译	C 要编译成汇编/机器码	Sass 要编译成 CSS
最终执行者	CPU 执行机器码	浏览器只认 CSS

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog