stylus(css預編譯器)
阿新 • • 發佈:2018-05-27
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預編譯器)