stylus（css預(yù)編譯器）

zhichangterry 發(fā)布于2019-04-23 13:41 / 790人閱讀

推薦去張?chǎng)涡翊笊襁@里詳細(xì)了解：http://www.zhangxinxu.com/jq/stylus/

安裝

　　npm install -g stylus

自動(dòng)編譯
　　$ stylus -w demo.styl -o dist /?demo.styl是styl文件，dist是要生成樣式的目錄文件名，-w 是自動(dòng)監(jiān)視文件，-o 是將編譯后的CSS文件輸出到指定文件中

壓縮

　　stylus --compress < test.styl > test.css? //stylus文件編譯并壓縮成css文件

導(dǎo)入(@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;
  }
}

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

云服務(wù)器 GPU云服務(wù)器預(yù)編譯階段模板預(yù)編譯 webrtc預(yù)編譯預(yù)編譯頭文件

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/2217.html

相關(guān)文章

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

摘要：使用預(yù)編譯處理的優(yōu)勢(shì)使用預(yù)處理器，可以提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來(lái)的額外維護(hù)開(kāi)銷(xiāo)，預(yù)處理器有沒(méi)有解決更大的麻煩。一、什么是css預(yù)編譯處理？ CSS 預(yù)編譯處理，從字面上理解，就是預(yù)先編譯處理CSS。它擴(kuò)展了 CSS 語(yǔ)言，增加了變量、Mixin、函數(shù)等編程的特性，使 CSS 更易維護(hù)和擴(kuò)展。...

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

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

SwordFly 2019-08-30 15:55 評(píng)論0 收藏0
大話css預(yù)編譯處理（三）：基礎(chǔ)語(yǔ)法篇

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

劉東 2019-08-30 15:55 評(píng)論0 收藏0
如何打造一個(gè)令人愉悅的前端開(kāi)發(fā)環(huán)境（二）

摘要：解析不同文件使用哪些，這個(gè)比較簡(jiǎn)單，很多文章都有，就不多說(shuō)了，注意的是，這里的可以換成你自己的預(yù)編譯器，例如等，或者直接用都行，當(dāng)然還可以用一種通用方法，后面補(bǔ)上。前情提要上一篇文章介紹了目前前端比較流行的各種編輯器，以及各種流行的打包方式，最后給了一個(gè)Gulp的例子，這個(gè)例子還是14年的時(shí)候?qū)懙?，還有一些可以?xún)?yōu)化的空間，就不討論了，這篇文章主要講目前火熱的打包構(gòu)建方式--Webp...

Lowky 2019-08-01 15:33 評(píng)論0 收藏0
如何打造一個(gè)令人愉悅的前端開(kāi)發(fā)環(huán)境（二）

摘要：解析不同文件使用哪些，這個(gè)比較簡(jiǎn)單，很多文章都有，就不多說(shuō)了，注意的是，這里的可以換成你自己的預(yù)編譯器，例如等，或者直接用都行，當(dāng)然還可以用一種通用方法，后面補(bǔ)上。前情提要上一篇文章介紹了目前前端比較流行的各種編輯器，以及各種流行的打包方式，最后給了一個(gè)Gulp的例子，這個(gè)例子還是14年的時(shí)候?qū)懙模€有一些可以?xún)?yōu)化的空間，就不討論了，這篇文章主要講目前火熱的打包構(gòu)建方式--Webp...

Object 2019-08-22 10:36 評(píng)論0 收藏0