css转化成stylus,stylus

[TOC]

# [stylus](http://stylus-lang.com/)

中文翻译：https://stylus.bootcss.com/

SASS/SCSS 转换为 styl：http://sass2stylus.com/

## [nib](http://tj.github.io/nib/)

Nib是一个小巧而强大的库，用于 Stylus CSS，提供强大的跨浏览器CSS3 mixins，使你的工作更容易。

## [jeet](http://jeet.gs/)

## [Rucksack](http://simplaio.github.io/rucksack/)

Rucksack 是一款有趣的CSS工具，让CSS的开发过程更加有趣了。Rucksack 是基于PostCSS构建的，模块化设计，没有冗余，运行起来飞快。将Rucksack融入到你的开发流程是很简单的，Rucksack对绝大多数的工具都有相应的插件。由于它是基于PostCSS来构建的，所以它同其他的CSS处理工具都能很好的兼容，甚至能够同Stylus直接协同。

# 书写规则

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