stylus（css預編譯器）

zhichangterry 發布于2019-04-23 13:41 / 735人閱讀

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

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

云服務器 GPU云服務器預編譯階段模板預編譯 webrtc預編譯預編譯頭文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2217.html

大話css預編譯處理（一）通讀介紹篇

摘要：使用預編譯處理的優勢使用預處理器，可以提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。一、什么是css預編譯處理？ CSS 預編譯處理，從字面上理解，就是預先編譯處理CSS。它擴展了 CSS 語言，增加了變量、Mixin、函數等編程的特性，使 CSS 更易維護和擴展。...

Backache 2019-08-30 15:55 評論0 收藏0
大話css預編譯處理（二）安裝使用篇

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

SwordFly 2019-08-30 15:55 評論0 收藏0
大話css預編譯處理（三）：基礎語法篇

摘要：值得慶幸的是，這三款預處理器語言的語法和語法都差不多。在這一節中，我們依次來對比一下這三款預處理器語言各種特性的異同之處，以及使用方法。預處理器語言支持任何變量例如顏色數值文本。一、Sass、LESS和Stylus的語法每一種語言都有自己一定的語法規則，CSS預處理器語言也不例外，在真正使用CSS預處器語言之前還有一個不可缺少的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預...

劉東 2019-08-30 15:55 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（二）

摘要：解析不同文件使用哪些，這個比較簡單，很多文章都有，就不多說了，注意的是，這里的可以換成你自己的預編譯器，例如等，或者直接用都行，當然還可以用一種通用方法，后面補上。前情提要上一篇文章介紹了目前前端比較流行的各種編輯器，以及各種流行的打包方式，最后給了一個Gulp的例子，這個例子還是14年的時候寫的，還有一些可以優化的空間，就不討論了，這篇文章主要講目前火熱的打包構建方式--Webp...

Lowky 2019-08-01 15:33 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（二）

摘要：解析不同文件使用哪些，這個比較簡單，很多文章都有，就不多說了，注意的是，這里的可以換成你自己的預編譯器，例如等，或者直接用都行，當然還可以用一種通用方法，后面補上。前情提要上一篇文章介紹了目前前端比較流行的各種編輯器，以及各種流行的打包方式，最后給了一個Gulp的例子，這個例子還是14年的時候寫的，還有一些可以優化的空間，就不討論了，這篇文章主要講目前火熱的打包構建方式--Webp...

Object 2019-08-22 10:36 評論0 收藏0