成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

直接使用sublime編譯stylus

Enlightenment / 2219人閱讀

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

stylus介紹

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

文檔參考

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

Stylus基本應(yīng)用 
body
  color white
==>
body {
  color: #fff;
}

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

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

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);
}

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

編譯生成CSS

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

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

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

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

結(jié)束語

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115246.html

相關(guān)文章

  • 直接使用sublime編譯stylus

    摘要：介紹是一個的預(yù)處理框架，年產(chǎn)生，來自社區(qū)，主要用來給項目進行預(yù)處理支持，所以是一種新型語言，可以創(chuàng)建健壯的動態(tài)的富有表現(xiàn)力的。 stylus介紹 Stylus 是一個CSS的預(yù)處理框架，2010年產(chǎn)生，來自Node.js社區(qū)，主要用來給Node項目進行CSS預(yù)處理支持，所以 Stylus 是一種新型語言，可以創(chuàng)建健壯的、動態(tài)的、富有表現(xiàn)力的CSS。比較年輕，其本質(zhì)上做的事情與 SASS...

    darkerXi 評論0 收藏0

  • stylus入門使用方法

    摘要：默認使用的作為文件擴展名，支持多樣性的語法。功能上更為強壯，和聯(lián)系更加緊密。所以我選擇，玩兒過一段時間，主要是這玩意依賴運行，所以我放棄使用了。這樣就算是安裝完了，也可以正常使用。用于保存項目元數(shù)據(jù)。 stylus介紹 是個什么鬼？對于開發(fā)來說，CSS的弱點在于靜態(tài)化。我們需要一個真正能提高開發(fā)效率的工具，LESS， SASS都在這方面做了一些貢獻。 Stylus 是一個CSS的預(yù)...

    LiuZh 評論0 收藏0

  • 大話css預(yù)編譯處理（二）安裝使用篇

    摘要：上面的命令會將編譯的傳遞給，你可以將它保存到一個文件中除了上面的命令轉(zhuǎn)譯源文件之外，現(xiàn)在還有很多第三方開發(fā)的工具，例如是一個前端預(yù)處理器語言圖形編譯工具，支持，幫助開發(fā)者更高效地使用它們進行開發(fā)。 一、Sass、LESS和Stylus的安裝 1.Sass的安裝 Sass是Ruby語言寫的，但是兩者的語法沒有關(guān)系。不懂Ruby，照樣可以正常使用Sass。只是必須先安裝Ruby，然后再安裝...

    SwordFly 評論0 收藏0

  • 學習Stylus

    摘要：函數(shù)這段代碼聲明了函數(shù)，并且接收了參數(shù)在使用時只需要像上面的代碼那樣輸入函數(shù)名稱和參數(shù)就可以設(shè)置屬性。選擇器這段代碼被編譯成在元素里面寫樣式的時候是使用一個鍵縮進來體現(xiàn)是屬于該元素的樣式。 關(guān)于stylus stylus是css的預(yù)處理框架，是以.styl為后綴的文件，可以創(chuàng)建健壯的，動態(tài)的富有表現(xiàn)的css。它用來為css增加一些編程的特性，比如在css中可以使用變量，函數(shù)等編程語言的...

    cncoder 評論0 收藏0

  • Stylus插件開發(fā)教程

    摘要：你還需安裝一個依賴，告訴使用者，你這個是基于哪個版本開發(fā)的，當然你可以不安裝這個依賴，那只能自己用了。開發(fā)調(diào)試在根目錄中運行在本機全局為做一個軟鏈接，如果你移動了目錄你得重新做軟鏈接。因為你在前面添加了文件事實上導入的文件是。 由于Stylus的強大，它支持SCSS LESS 靈活的書寫方式，然后它不用像SCSS安裝Ruby，不是特別出名，流行的工具沒有使用它，只是在小的圈子里面挺火滴...

    cyqian 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<