[TOC] # [stylus](http://stylus-lang.com/) 中文翻译：https://stylus.bootcss.com/ SASS/SCSS 转换为 styl：http://sass2stylus.com/ stylus-to-css： [txs1992/stylus-converter](https://github.com/txs1992/stylus-converter) stylus 转换为 scss 或 less 或其他预编译 CSS 的工具。 https://www.cssportal.com/stylus-to-css/ http://beautifytools.com/stylus-compiler.php https://jsonformatter.org/stylus-to-css # 弃坑？ 选择 less 还是选择 sass，sass 和 less 差不多，但是 sass 比 less 强大， 个人首推：sass-scss stylus 不支持 @root，层层嵌套，不耗性能啊。 第二个，stylus ，相比 sass，sass 有 sass 和 scss 模式啊。 scss 模式，现在的编译器 : ; {} ，不都是 IDE 自动补全吗？ sass 安装困难，有 sass.js sassjs-loader 啊：[sass 安装：webpack sass 编译失败，node-sass 安装失败的终极解决方](https://www.zhoulujun.cn/html/webfront/ECMAScript/nodejs/8143.html) 最后还是安利 楼下的 stylus 弃坑工具： 放弃 stylus，less 拥抱 sass，明天更美好 ## nib [Nib](https://github.com/stylus/nib) 是一个小巧而强大的库，用于 Stylus CSS，提供强大的跨浏览器CSS3 mixins，使你的工作更容易。 # 书写规则 Stylus 就跟 CSS 几乎一样，区别选择器后不需要 {} ，利用缩进、空格和换行来减少需要输入的字符，组合选择器可用逗号，空格分隔。样式后可加上冒号，用做与值分隔，若不要就得用空格分隔。样式值后不用加分号。 stylus： ```css body color red ul li color blue a background-color @color ``` 编译成： ```css body { color: #f00; } body ul li { color: #00f; } body ul li a { background-color: #00f; } ``` # 配合 PostCSS 使用预处理器和PostCSS一起处理你的样式表，首要的原则是：预处理器要运行在PostCSS之前（意味着先要编译`styl`成`css`文件，然后在使用postcss做后处理）。这主要是因为你不想让任何预处理器的指定语法让PostCSS插件瘫痪不能工作，当然也不希望PostCSS修改你的代码，防止预处理器不能按预期运行。 通过 [poststylus](https://github.com/seaneking/poststylus) # [实战](https://www.caktusgroup.com/blog/2017/12/18/supercharging-your-css-stylus-and-postcss/) ~~~ yarn global add stylus gulp //全局安装 stylus 和 gulp yarn add gulp-stylus poststylus //本项目下安装 gulp-stylus 和 poststylus yarn add autoprefixer cssnano yarn add gulp //本项目下安装 gulp ~~~ google 搜索 stylus postcss # 参考 https://github.com/postcss/postcss/blob/master/README.cn.md