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

資訊專欄INFORMATION COLUMN

sass入門初體驗(yàn)

aisuhua / 1552人閱讀

摘要：接上文入門初體驗(yàn)，接下來講講，有兩種文件后綴名，一種是，另一種是。

接上文less入門初體驗(yàn)，接下來講講sass，sass有兩種文件后綴名，一種是.sass，另一種是.scss。前者類似于ruby的語法規(guī)則，沒有花括號，沒有分號，具有嚴(yán)格的縮進(jìn)；而后者更貼近于css的語法規(guī)則，易于閱讀，更具語義性，所以本文采用.scss后綴名來編寫sass代碼

編譯

1、Ruby:
sass是由Ruby語言編寫的，所以我們可以通過Ruby來編輯sass代碼，首先需要安裝ruby，然后再安裝sass，之后通過sass命令編譯文件

sudo apt install ruby
sudo gem install sass
sass style.scss style.css

sass提供四個編譯風(fēng)格的選項(xiàng):

nested：嵌套縮進(jìn)的css代碼，默認(rèn)值
expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼
compact：簡潔格式的css代碼
compressed：壓縮后的css代碼

生產(chǎn)環(huán)境中一般使用最后一個

sass --style compressed style.scss style.css
變量

變量使用以$開頭(這也是我喜愛sass多于less的原因，誰不喜歡money呢？O(∩_∩)O哈哈~，開個玩笑)，如果變量需要在字符串中使用，只需要寫在#{}中即可

$color:#999;
$side:left;
$bw:2px;
div {
    background-color: $color;
    border-#{$side}-width: $bw;
}

編譯后:

div {
    background-color: #999;
    border-left-width: 2px;
}
Mixin(混合)

實(shí)現(xiàn)代碼塊的重用，使用@mixin定義一個代碼塊，通過@include就可以調(diào)用此代碼塊

@mixin b_r($radius:5px){
    -webkit-border-radius:$radius;
    -mz-border-radius:$radius;
    border-radius:$radius;
}
div1{
    @include b_r();
}
div2{
    @include b_r(10px);
}

編譯后:

div1 {
    -webkit-border-radius: 5px;
    -mz-border-radius: 5px;
    border-radius: 5px;
}

div2 {
    -webkit-border-radius: 10px;
    -mz-border-radius: 10px;
    border-radius: 10px;
}
嵌套

與less類似，不多介紹

div {
    background-color: #333;
    a {
        text-decoration: none;
        &:hover {
            color: red;
        }
    }
}

編譯后:

div {
    background-color: #333;
}
div a {
    text-decoration: none;
}
div a:hover {
    color: red;
}
運(yùn)算

與less類似，不多介紹

$w:1000px;
body {
    width: $w/2;
    div {
        height: 100px*5;
    }
}

編譯后:

body {
    width: 500px;
}
body div {
    height: 500px;
}
顏色函數(shù) 
div {
    color: lighten(#ccc, 10%);
    background-color: darken(#999, 10%);
}

編譯后:

div {
    color: #e6e6e6;
    background-color: gray;
}
注釋 
/* Hello Sass 我依然在這里 */
div1 {
    color: red;
}

// Hello Sass 我不見了
div2 {
    color: green;
}

/*!  Hello Sass 即使壓縮了，我依然還在  */
div3 {
    color: blue;
}

編譯后:

@charset "UTF-8";
/* Hello Sass 我依然在這里 */
div1 {
  color: red;
}

div2 {
  color: green;
}

/*!  Hello Sass 即使壓縮了，我依然還在  */
div3 {
  color: blue;
}

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

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

相關(guān)文章

  • less入門初體驗(yàn)

    摘要：有眾多的預(yù)處理器，其中比較流行的三個是，本文就一起來體驗(yàn)編寫代碼官方文檔官網(wǎng)栗子編譯成文件編譯客戶端瀏覽器通過在源代碼中引入文件，用于實(shí)時對樣式表文件進(jìn)行編譯并不推薦注意你的樣式文件一定要在引入前先引入，并且需要 css有眾多的預(yù)處理器，其中比較流行的三個是less、sass、stylus，本文就一起來體驗(yàn)less編寫css代碼官方文檔:http://lesscss.org/官網(wǎng)栗子:...

    chinafgj 評論0 收藏0

  • webpack+react項(xiàng)目初體驗(yàn)——記錄我的webpack環(huán)境配置

    摘要：安裝寫在里安裝和配置和之前一樣用來處理文件相關(guān)的這個包括的就比較多，有，后面兩個是為了寫和服務(wù)。 這兩天學(xué)習(xí)了一些webpack的知識，loaders+plugins真的很強(qiáng)大！不過配置起來也很復(fù)雜，看了一些文章，自己也寫了項(xiàng)目練手，寫下來加深自己的印象。 首先，非常非常推薦的幾篇文章，初學(xué)者一定要看！http://www.jianshu.com/p/42e1...（標(biāo)題一點(diǎn)也不夸張，...

    csRyan 評論0 收藏0

  • 常見的CSS預(yù)處理器之Less初體驗(yàn)

    摘要：預(yù)處理器的技術(shù)現(xiàn)在已經(jīng)很成熟了，而且也出現(xiàn)了各種不同的預(yù)處理器語言，但是呢不可能一一列出，面面俱到，這篇文章呢，主要是介紹一下比較常見的預(yù)處理器語言之一之初體驗(yàn)。 CSS預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。 簡單來說，CSS預(yù)處理器用一種專門的編程語言，進(jìn)行We...

    desdik 評論0 收藏0

  • vue-cli3.0初體驗(yàn)～

    摘要：比如傳遞給時，使用。為所有的及其預(yù)處理文件開啟。在生產(chǎn)環(huán)境下為和使用在多核機(jī)器下會默認(rèn)開啟。是否使用分割供應(yīng)的包也可以是一個在包中引入的依賴的顯性的數(shù)組。查閱配置行為。 之前因?yàn)閜arcel的出現(xiàn)，webpack也跟進(jìn)了零配置vue-cli自然也不能落下,cli3.0也升級到webpack4，并增加許多新特性 安裝并創(chuàng)建一個項(xiàng)目 支持npm和yarn npm install -g @v...

    AlphaWallet 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<