Stylus (CSS pre-compiler)

Recommended to Zhang Xin Asahi great god here to learn more: http://www.zhangxinxu.com/jq/stylus/

Installation

NPM Install-g Stylus

Automatic compilation
$ stylus-w Demo.styl-o dist/demo.styl is a styl file, dist is the directory file name to generate the style,-W is the automatic watch file,-O is the output of the compiled CSS file to the specified file

Compression

Stylus--compress < test.styl > test.css//stylus files compiled and compressed into CSS files

Import (@import)

@import "./demo1"

Variable (Variables)

font-size = 14pxbody  font font-size Arial, sans-seri

{  font:14px Arial, sans-seri;}

Media (@media)
--stylus--

. widget  padding 10px@media screen and (min-width:600px)  padding 20px

--css--

{  padding: 10px;}  {  . widget {    padding: 20px;  } }

It seems to pass the file, there are initialization style, and compatible with the style of two small files, not sent, the message I will be OK.

Stylus (CSS pre-compiler)