1. 程式人生 > >stylus(css預編譯器)

stylus(css預編譯器)

med body dem 張鑫旭 目錄 demo1 pre 大神 樣式

推薦去張鑫旭大神這裏詳細了解:http://www.zhangxinxu.com/jq/stylus/

安裝

  npm install -g stylus

自動編譯
  $ stylus -w demo.styl -o dist / demo.styl是styl文件,dist是要生成樣式的目錄文件名,-w 是自動監視文件 ,-o 是將編譯後的CSS文件輸出到指定文件中

壓縮

  stylus --compress < test.styl > test.css //stylus文件編譯並壓縮成css文件

導入(@import)

@import "./demo1"

變量(Variables)

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

媒體(@media)
——stylus——

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

——css——

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

好像傳不了文件,有初始化樣式,和兼容樣式的兩個小文件,傳不送來,需要的留言我就行。

stylus(css預編譯器)