0.参考说明

本文参考自以下文章

《stylus入门使用方法》徐小七七

https://zhuanlan.zhihu.com/p/27431427

Stylus

https://www.stylus-lang.cn/

1.Stylus简介

“富于表现力、动态的、健壮的 CSS” —— Stylus

在魔改的过程中，难免会查看或修改主题源文件的内容，发现本站的主题Butterfly就使用了Stylus来管理样式，css多层级的写法实在不够友好，Stylus则是类似yaml那样，使用空格、缩进、换行来确定层级关系，减少重复冗余的字符，当然不仅于此，基础语法以及更多功能请参考官网Stylus。

2.Stylus安装

先决条件：Node.js，若未安装，请查看《Node.js安装教程》

安装Stylus：

1
npm install stylus -g

测试一下是否安装成功：

3.生成css

Hexo主题的魔改建议养成良好习惯，关于自定义文件的添加，请参考这篇文章《Hexo博客添加自定义css和js文件》Leonus

在Hexo根目录 -> source -> css中新建一 个test.styl文件，输入一些简单的代码，如：

1
2
.hello
  background blue

然后在终端中输入：

1
2
// -c, --compress:生成压缩css文件
stylus -c test.styl

查看test.css文件：

可以看到是压缩后的css文件

扩展：一些其他指令

1
2
3
4
5
// CSS转换成styl
stylus --css test.css test2.styl

// 输出名称一致的.styl文件
stylus --css test.css

4.引入gulp

上面的命令可以把stylus转换为css，但手动转换难免有些麻烦，此处引入gulp，可以自动监测并转换stylus文件。

具体请看

《在Hexo中使用gulp.js整合和压缩静态文件——编译、合并自定义Stylus并监测》今愚

https://jinyu.host/posts/86891379.html#编译、合并自定义Stylus并监测