直接使用sublime編譯stylus

stylus介紹

Stylus 是一個CSS的預處理框架，2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，因此 Stylus 是一種新型語言，能夠建立健壯的、動態的、富有表現力的CSS。比較年輕，其本質上作的事情與 SASS/LESS 等相似，應該是有不少借鑑，因此近似腳本的方式去寫CSS代碼，它的文件擴展名是.styl」。

文檔參考

官方stylus文檔
張鑫旭中文翻譯

Stylus基本應用

body
  color white
==>
body {
  color: #fff;
}

textarea, input
  border 1px solid #eee
==>
textarea,
input {
  border: 1px solid #eee;
}

乍一看是否是以爲很奇怪，冒號、花括號、分號通通不見了。這就是stylus的神奇之處，你若是不習慣的話，Stylus也接受標準的CSS語法，同時也能夠像Sass老的語法規則，使用縮進控制

body{
    color white
}

或者

body{
    color:white;
}

以上二者編譯結果都爲

body{
    color:white;
}

stylus一樣能夠像sass、less等使用Mixins、Functions等

好比mixin

support-for-ie ?= true
opacity(n)
  opacity n
  if support-for-ie
    filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
    
#logo:hover
    opacity 0.5

渲染結果爲：

#logo:hover {
      opacity: 0.5;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

這裏就不對其功能作一一介紹了，詳情能夠參照上面提供的官方文檔

編譯生成CSS

這裏主要講如何用sublime的插件生成，固然還有命令行、grunt等方式生成本文不作陳述了，想要了解的能夠查看stylus入門使用或者參照其餘例子
若是你使用sublime，你能夠ctrl+shift+p調出控制檯而後輸入install package而後輸入stylus而後回車安裝，安裝成功後在package settings你會看到如藍色背景條所示

展開藍色背景條，在setting-user裏面進行配置便可

{
    "envPATH": "",  //環境的路徑 
    "binDir": "",   //項目路徑
    "compileOnSave": true,  //是否編輯保存
    "compileDir": true,   //編譯到指定目錄
    "compress": true,  //是否壓縮
    "compilePaths": {"": ""}  //輸出路徑
}

設置完成以後創建.styl文件，而後編輯保存，你就會在輸出路徑裏面看到編譯好的css文件了

結束語

一、如今CSS預處理器技術已經很是的成熟，已經有不少預處理框架Sass、Less CSS、Stylus還有Postcss，選擇哪種徹底看我的喜愛。二、網上已經有不少關於stylus的教程，可是在處理編譯這一塊沒有談及直接用編輯器的插件處理的，至少我以前是沒找到相關，也許是我搜索的不夠全面。三、文章有寫的不對的地方能夠留言指出本人將及時改正，畢竟本身的看法老是有限的，有興趣的能夠加入前端交流QQ羣：519875573 進行討論。