[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