🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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