stylus（css預編譯器）

老密發表於2018-05-27
CSS編譯

推薦去張鑫旭大神這裡詳細瞭解：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;
  }
}

好像傳不了檔案，有初始化樣式，和相容樣式的兩個小檔案，傳不送來，需要的留言我就行。

相關文章