直接使用sublime編譯stylus

darkerXi 發(fā)布于2019-08-02 15:54 / 3118人閱讀

摘要：介紹是一個(gè)的預(yù)處理框架，年產(chǎn)生，來(lái)自社區(qū)，主要用來(lái)給項(xiàng)目進(jìn)行預(yù)處理支持，所以是一種新型語(yǔ)言，可以創(chuàng)建健壯的動(dòng)態(tài)的富有表現(xiàn)力的。

stylus介紹

Stylus 是一個(gè)CSS的預(yù)處理框架，2010年產(chǎn)生，來(lái)自Node.js社區(qū)，主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，所以 Stylus 是一種新型語(yǔ)言，可以創(chuàng)建健壯的、動(dòng)態(tài)的、富有表現(xiàn)力的CSS。比較年輕，其本質(zhì)上做的事情與 SASS/LESS 等類似，應(yīng)該是有很多借鑒，所以近似腳本的方式去寫CSS代碼，它的文件擴(kuò)展名是.styl”。

文檔參考

官方stylus文檔
張?chǎng)涡裰形姆g

Stylus基本應(yīng)用

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

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

乍一看是不是覺得很奇怪，冒號(hào)、花括號(hào)、分號(hào)統(tǒng)統(tǒng)不見了。這就是stylus的神奇之處，你如果不習(xí)慣的話，Stylus也接受標(biāo)準(zhǔn)的CSS語(yǔ)法，同時(shí)也可以像Sass老的語(yǔ)法規(guī)則，使用縮進(jìn)控制

body{
    color white
}

或者

body{
    color:white;
}

以上兩者編譯結(jié)果都為

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

渲染結(jié)果為：

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

這里就不對(duì)其功能做一一介紹了，詳情可以參照上面提供的官方文檔

編譯生成CSS

這里主要講如何用sublime的插件生成，當(dāng)然還有命令行、grunt等方式生成本文不做陳述了，想要了解的可以查看stylus入門使用或者參照其他例子
如果你使用sublime，你可以ctrl+shift+p調(diào)出控制臺(tái)然后輸入install package然后輸入stylus然后回車安裝，安裝成功后在package settings你會(huì)看到如藍(lán)色背景條所示

展開藍(lán)色背景條，在setting-user里面進(jìn)行配置即可

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

設(shè)置完成之后建立.styl文件，然后編輯保存，你就會(huì)在輸出路徑里面看到編譯好的css文件了

結(jié)束語(yǔ)

1、現(xiàn)在CSS預(yù)處理器技術(shù)已經(jīng)非常的成熟，已經(jīng)有很多預(yù)處理框架Sass、Less CSS、Stylus還有Postcss，選擇哪一種完全看個(gè)人喜好。
2、網(wǎng)上已經(jīng)有很多關(guān)于stylus的教程，但是在處理編譯這一塊沒(méi)有談及直接用編輯器的插件處理的，至少我之前是沒(méi)找到相關(guān)，也許是我搜索的不夠全面。
3、文章有寫的不對(duì)的地方可以留言指出本人將及時(shí)改正，畢竟自己的見解總是有限的，有興趣的可以加入前端交流QQ群：519875573 進(jìn)行討論。