亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

學(xué)習(xí)Stylus

cncoder / 2263人閱讀

摘要：函數(shù)這段代碼聲明了函數(shù)，并且接收了參數(shù)在使用時(shí)只需要像上面的代碼那樣輸入函數(shù)名稱(chēng)和參數(shù)就可以設(shè)置屬性。選擇器這段代碼被編譯成在元素里面寫(xiě)樣式的時(shí)候是使用一個(gè)鍵縮進(jìn)來(lái)體現(xiàn)是屬于該元素的樣式。

關(guān)于stylus 
stylus是css的預(yù)處理框架，是以.styl為后綴的文件，可以創(chuàng)建健壯的，動(dòng)態(tài)的富有表現(xiàn)的css。它用來(lái)為css增加一些編程的特性，比如在css中可以使用變量，函數(shù)等編程語(yǔ)言的特性，從而是css更加的簡(jiǎn)潔，適應(yīng)性更強(qiáng)，代碼也更加的直觀易懂。
在寫(xiě)代碼的時(shí)候發(fā)現(xiàn)stylus有個(gè)特點(diǎn)，代碼風(fēng)格有點(diǎn)像python，特別簡(jiǎn)潔不需要大括號(hào)，分號(hào)什么的并且也是用空格來(lái)規(guī)范格式。

安裝

使用stylus首先需要安裝，當(dāng)然這也是一個(gè)比較簡(jiǎn)單的事情，安裝stylus只需要一個(gè)簡(jiǎn)單的命令nmp install -g stylus（這是在你安裝好了nodejs并且配置好了環(huán)境變量情況下，安裝和配置nodejs可以去網(wǎng)上查找一下，很簡(jiǎn)單這里就不多講）。安裝好了后使用stylus --version查看是否安裝成功。
簡(jiǎn)單的使用stylus

首先創(chuàng)建style.styl文件編寫(xiě)一段簡(jiǎn)單的stylus的代碼

bgc = red
$border-radius(arg)
    -webkit-border-radius: arg
    -moz-border-radius: arg
    border-radius: arg
*
    margin 0
    padding 0

.box
    height 100
    width 100
    background-color bgc
    border-radius(2px)
    .content
        background-color bgc
        h1
            color white
            &:hover
                color green

使用命令stylus -w style.styl -o style.css將文件style.styl文件編譯成并輸出成css文件，編譯后生成的css代碼如下

* {
  margin: 0;
  padding: 0;
}
.box {
  height: 100;
  width: 100;
  background-color: #f00;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.box .content {
  background-color: #f00;
}
.box .content h1 {
  color: #fff;
}
.box .content h1:hover {
  color: #008000;
}

是不是感覺(jué)寫(xiě)css簡(jiǎn)單了許多，寫(xiě)一個(gè)styl文件再編譯生成的css文件效率高多了。
下面我們?cè)趤?lái)分析一下這段代碼

變量 
bgc = red
background-color bgc
這段代碼聲明了變量bgc，并且為變量賦值為red。在需要用到相同顏色的地方可以
直接使用這個(gè)變量.
前面有兩處背景顏色為red，直接使用變量，當(dāng)需要改變顏色時(shí)不需要一個(gè)個(gè)的改，
只需要改變變量的值就可以了。
函數(shù) 
$border-radius(arg)
    -webkit-border-radius: arg
    -moz-border-radius: arg
    border-radius: arg
 $border-radiius(2px)
這段代碼聲明了函數(shù)，并且接收了參數(shù)arg.在使用時(shí)只需要像上面的代碼那樣輸入函數(shù)名稱(chēng)
和參數(shù)就可以設(shè)置css屬性。參數(shù)不一定要傳入的，根據(jù)代碼的情況跟其他語(yǔ)言都差不多。
選擇器 
.box
    height 100
    width 100
    background-color bgc
    border-radius(2px)
    .content
        background-color bgc
        h1
            color white
            &:hover
                color green
這段代碼被編譯成
.box {
  height: 100;
  width: 100;
  background-color: #f00;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.box .content {
  background-color: #f00;
}
.box .content h1 {
  color: #fff;
}
.box .content h1:hover {
  color: #008000;
}

在元素里面寫(xiě)樣式的時(shí)候是使用一個(gè)tab鍵縮進(jìn)來(lái)體現(xiàn)是屬于該元素的樣式。寫(xiě).box 的子元素.content的樣式不需要在像寫(xiě)css那樣重新去寫(xiě)，只需要在.box下使用縮進(jìn)來(lái)體現(xiàn)元素.content是.box的子元素然后在寫(xiě).content的樣式就可以。是不是感覺(jué)喜歡上了stylus了。

在上面的這段stylus的代碼使用了一個(gè)&符號(hào)，這個(gè)&符號(hào)根據(jù)編譯出來(lái)的代碼可以很容易理解，它會(huì)指向最近的父級(jí)元素并且與他連接。

@規(guī)則

@import導(dǎo)入文件.styl，任何.css擴(kuò)展文件將作為字面量,stylus樣式作為動(dòng)態(tài)導(dǎo)入的。

@import "reset.css"

@css{} {}里面的不會(huì)被編譯
@block{} 作為一個(gè)塊賦值給一個(gè)變量
@media 和在css使用的方法相同
@keyframe 編譯的時(shí)候轉(zhuǎn)換成@-webkit-keyframes,可以通變量來(lái)添加前綴

雖然文章寫(xiě)得沒(méi)有那么詳細(xì)，涉及的一些細(xì)節(jié)并沒(méi)有講到可以去看一些相關(guān)文檔，這些主要的會(huì)了去學(xué)習(xí)一些細(xì)節(jié)還是很快的，很多東西跟編程語(yǔ)言還是差不多的，畢竟stylus就是來(lái)方便我們的。

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

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

相關(guān)文章

  • stylus入門(mén)使用方法

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

    LiuZh 評(píng)論0 收藏0

  • 大話(huà)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 評(píng)論0 收藏0

  • react學(xué)習(xí)日記第一記-webpack配置

    摘要：對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，無(wú)論使用還是還是，打包工具的配置永遠(yuǎn)都是一個(gè)必須的過(guò)程，因?yàn)檫@決定了打包出來(lái)項(xiàng)目的大小，資源占用，以及運(yùn)行速度。所以自己就動(dòng)手嘗試配置一下。 對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，無(wú)論使用vue 還是react還是angular，打包工具的配置永遠(yuǎn)都是一個(gè)必須的過(guò)程，因?yàn)檫@決定了打包出來(lái)項(xiàng)目的大小，資源占用，以及運(yùn)行速度。 由于之前的項(xiàng)目一直都是在使用vue，對(duì)于vue的webpa...

    Shonim 評(píng)論0 收藏0

  • react學(xué)習(xí)日記第一記-webpack配置

    摘要：對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，無(wú)論使用還是還是，打包工具的配置永遠(yuǎn)都是一個(gè)必須的過(guò)程，因?yàn)檫@決定了打包出來(lái)項(xiàng)目的大小，資源占用，以及運(yùn)行速度。所以自己就動(dòng)手嘗試配置一下。 對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，無(wú)論使用vue 還是react還是angular，打包工具的配置永遠(yuǎn)都是一個(gè)必須的過(guò)程，因?yàn)檫@決定了打包出來(lái)項(xiàng)目的大小，資源占用，以及運(yùn)行速度。 由于之前的項(xiàng)目一直都是在使用vue，對(duì)于vue的webpa...

    zhkai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

cncoder

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<