成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

sass學(xué)習(xí)

young.li / 1790人閱讀

摘要：基本規(guī)則變量用定義偽類用定義樣式可嵌套定義如嵌套規(guī)則適用群組選擇器選擇器的嵌套其實(shí)就是拼接空格的使用原生的只有執(zhí)行到才會(huì)加載速度較慢而的在生成文件時(shí)就導(dǎo)入相當(dāng)于合并文件局部文件約定用下劃線定義如局部文件不會(huì)多帶帶編譯只會(huì)存在于引用的文件

基本規(guī)則:

變量用$定義

偽類用&定義

樣式可嵌套定義,如

 #example{ 
 a {
 body.ie & hover { color: red }
 color: white;
 }
    div {background:black;}
}

body.ie & hover { color: red } <=> body.ie #example a:hover { color: red }

嵌套規(guī)則適用群組選擇器,> + ~選擇器(sass的嵌套其實(shí)就是拼接空格)

border: {

 style:                 
 left:             
 right:

}
<=>

 border-style:
 border-left:
 border-right:

@import的使用: 
原生的只有執(zhí)行到才會(huì)加載,速度較慢;而sass的@import在生成文件時(shí)就導(dǎo)入,相當(dāng)于合并css文件

局部文件,約定用下劃線定義,如(_example.scss),局部scss文件不會(huì)多帶帶編譯,只會(huì)存在于引用的文件中.

局部文件中的變量添加!default( 如 $val = red !default; ),代表默認(rèn)值,未定義時(shí)生效,全局變量添加!global.

嵌套中可調(diào)用局部文件,只在當(dāng)前嵌套中有效

使用原生@import的情況:
文件后綴為.css；
文件名為URL地址（如http://www.sass.hk/css/css.css；
文件名為CSS的url()值

靜默注釋

編譯后不會(huì)顯示,格式: // 注釋

混合器

通過@mixin mixin($a:red,$b)定義,@include 調(diào)用,:后面為默認(rèn)值

使用時(shí)機(jī): 能否為這個(gè)混合器想出一個(gè)好的簡短的名字

繼承

@extend定義,繼承與父樣式有關(guān)的一切樣式(如: .child @extend .father)

可以使用選擇器,只對(duì)選擇器命中的樣式生效(后面部分),也對(duì)子類生效(前面部分).

繼承相當(dāng)于 .father .child,因此會(huì)出現(xiàn)復(fù)雜的選擇器.

為了避免生成大量選擇器,不要在css規(guī)則中使用后代選擇器

 .foo .bar { @extend .baz; }
 .bip .baz { a: b; }

這個(gè)例子有三個(gè)情況 foo->bip->bar 、(foo,bip)->foo->bar、bip-> bar,如果其中一條規(guī)則的后代選擇器更復(fù)雜則代碼量呈指數(shù)增長.

理解

scss本質(zhì)上是字符串的格式編譯，比如變量，因?yàn)槭菑纳系较赂袷交蒫ss，所以變量只能寫在最前面，編譯器讀取變量值然后替換引用的部分；又比如偽類、嵌套樣式，&則不添加空格直接拼接，：則添加一個(gè)-字符。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113974.html

相關(guān)文章

  • 學(xué)習(xí)筆記 - Sass的安裝與使用手冊(cè)

    摘要：現(xiàn)在將學(xué)習(xí)筆記整理在這里，供大家參考。的安裝的編輯器安裝方法有很多，大致能分為兩種應(yīng)用程序和命令行界面。如果已經(jīng)安裝過，也可以使用指令如果提示權(quán)限不足，在命令行前加上即可。參考網(wǎng)頁編輯器的使用的使用很簡單，記住兩條指令即可。 最近因?yàn)楣ぷ餍枰詫W(xué)了Sass?，F(xiàn)在將學(xué)習(xí)筆記整理在這里，供大家參考。 1. Sass的安裝 Sass的編輯器安裝方法有很多，大致能分為兩種：應(yīng)用程序（appl...

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

  • SASS學(xué)習(xí)記錄

    摘要：前言很久沒有用文章記錄自己的學(xué)習(xí)歷程了，主要是因?yàn)閷?shí)在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。以前我只使用外部，現(xiàn)在的更加好用，所以在學(xué)習(xí)過程中記了一些筆記。在后面加一個(gè)感嘆號(hào)，表示這是重要注釋。 前言 很久沒有用文章記錄自己的學(xué)習(xí)歷程了，主要是因?yàn)閷?shí)在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。但是今天還是拾起筆來了，雖然沒什么干貨，但...

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

  • SASS學(xué)習(xí)記錄

    摘要：前言很久沒有用文章記錄自己的學(xué)習(xí)歷程了，主要是因?yàn)閷?shí)在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。以前我只使用外部，現(xiàn)在的更加好用，所以在學(xué)習(xí)過程中記了一些筆記。在后面加一個(gè)感嘆號(hào)，表示這是重要注釋。 前言 很久沒有用文章記錄自己的學(xué)習(xí)歷程了，主要是因?yàn)閷?shí)在寫的不行，相比大牛寫的博客，我這只能算是東拼西湊或者說是讀書筆記。但是今天還是拾起筆來了，雖然沒什么干貨，但...

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

  • scss學(xué)習(xí)

    摘要：和的區(qū)別文件擴(kuò)展名不同和是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個(gè)感嘆號(hào)，表示這是重要注釋。重要聲明繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器，使用命令。 1. SASS和SCSS的區(qū)別 文件擴(kuò)展名不同：.sass和.scss； SASS是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)；而SCSS的語法和C...

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

  • scss學(xué)習(xí)

    摘要：和的區(qū)別文件擴(kuò)展名不同和是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個(gè)感嘆號(hào)，表示這是重要注釋。重要聲明繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器，使用命令。 1. SASS和SCSS的區(qū)別 文件擴(kuò)展名不同：.sass和.scss； SASS是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)；而SCSS的語法和C...

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

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

0條評(píng)論

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