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

資訊專欄INFORMATION COLUMN

Sass 語(yǔ)法規(guī)則

Magicer / 1095人閱讀

摘要：首先，和使用同一種語(yǔ)法，但是寫法有所不同。如果一個(gè)混合器只包含規(guī)則，不包含屬性，那么該混合器就可以在文檔的頂部調(diào)用，用于全局。

首先，sass和scss使用同一種語(yǔ)法，但是寫法有所不同。
sass在編寫的時(shí)候不適用" { "和" } "來(lái)包括，每一句的末尾也不可以用" ; "來(lái)結(jié)束。
而scss則完全可以按照css的寫法編寫，本篇基本使用sass的寫法。
1 變量 1-1 變量聲明 
在sass中可以使用$來(lái)定義變量

//變量定義
$font-color: #333
$highlight-color: #F90

//變量引用
header 
  $width: 100px
  width: $width
  color: $font-color
在sass中，中劃線和下劃線都可以使用，如：
$link-color: blur
a
  color: $link_color
2 嵌套 2-1 基本嵌套 
在sass中，需要在在父級(jí)中寫入很多子級(jí)的不同屬性，可以使用嵌套。
嵌套在sass中顯示可能看不明白，本節(jié)附帶scss語(yǔ)句。
// sass 語(yǔ)句
.contanin
  article
    h1 color: #333
    p margin-bottom: 1.4rem
  aside
    background-color: #abc

// scss 語(yǔ)句
.contanin {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4rem }
  }
  aside {
    background-color: #abc
  }
}

// 編譯后
.contanin article h1 { color: #333 }
.contanin article p { margin-bottom: 1.4rem }
.contanin aside { background-color: #abc }
2-2 父選擇器的標(biāo)識(shí)符：& 
當(dāng)想要通過(guò)嵌套給父級(jí)元素設(shè)置偽類事件時(shí)，如果我們這樣寫：
// scss語(yǔ)句
article a {
  color: blue;
  :hover { color: red }
}
這樣的結(jié)果是給article中a鏈接的所有后代添加了hover事件，這肯定不是我們想要的結(jié)果；這時(shí)可以使用 & 來(lái)獲取父級(jí)，如：
// scss語(yǔ)句
article a {
  color: blue;
  &:hover { color: red }
}
這樣就可以實(shí)現(xiàn)給article中的a鏈接設(shè)置hover事件
還有一種情況，需要給父選擇器之前添加選擇器時(shí)，可以直接在 & 前面加上選擇器，如
// scss語(yǔ)句
#content aside {
  color: red;
  .main & { color: green }
}

// 編譯后
#content aside {color: red};
.main #content aside { color: green }
2-3 群組選擇器的嵌套 
// sass語(yǔ)句
.container 
  h1, h2, h3 
    margin-bottom: .8em

// 編譯后
.container h1, .container h2, .container h3 {
  margin-bottom: .8em 
}
2-4 多種選擇器：> 、+ 、~ 
> :子代選擇器，可以選擇一個(gè)元素的子元素，而不是后代元素
+ :同層相鄰選擇器，可以獲取一個(gè)元素后緊跟的一個(gè)元素
~ :同層全體組合選擇器，可以獲取一個(gè)元素同層的所有所選元素
2-5 嵌套屬性 
// sass語(yǔ)句
nav 
  border: 
  style: solid
  width: 1px
  color: #ccc

// 編譯后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
感覺并不是很實(shí)用，像border,background,translate這些完全可以將所有屬性以此寫在后面。。
3 導(dǎo)入sass 
在sass中可以通過(guò)@import "reset"來(lái)導(dǎo)入reset.sass文件
3-1 用sass中的部分文件 
在sass中有些sass文件你可能并不想將其轉(zhuǎn)化成css文件，只是為了用于其他地方導(dǎo)入，這時(shí)你就可以通過(guò)在文件名的前面加一個(gè)下劃線_來(lái)標(biāo)記。而且導(dǎo)入的時(shí)候可以省略下劃線。
如：想導(dǎo)入_reset.sass文件時(shí)，可以在想要導(dǎo)入的位置寫@import "reset";并且導(dǎo)入的文件種的變量都可以被使用。
3-2 默認(rèn)變量值 
通常在預(yù)設(shè)樣式中都可以使用!default來(lái)設(shè)置默認(rèn)樣式，但是!default用于變量，含義：如果這個(gè)扁郎被聲明賦值了，那就用它聲明的值，否則就用這個(gè)默認(rèn)值。
// sass語(yǔ)句
$color: #333 !default
3-3 嵌套導(dǎo)入 
導(dǎo)入一個(gè)sass的局部文件，也可以嵌套在一個(gè)選擇器中導(dǎo)入，如
// sass語(yǔ)句
.aside
  @import "reset"
這樣的導(dǎo)入，reset.sass中的變量的作用域就只有在.aside中才有效。
4 混合器mixin 4-1 混合器的定義與調(diào)用 
混合器通俗來(lái)說(shuō)就是將一大段樣式賦予一個(gè)名字，需要的時(shí)候只需調(diào)用這個(gè)名字即可（用于瀏覽器兼容處理上很方便）
// sass語(yǔ)句
// 定義
@mixin rounded-corners 
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

// 調(diào)用
notice 
  background-color: green
  border: 2px solid #00aa00
  @include rounded-corners
4-2 混合器中的css規(guī)則 
混合器中同樣可以包含選擇器和選擇器中的屬性。
混合器中也可以使用sass的父選擇器標(biāo)識(shí)符&。
如果一個(gè)混合器只包含css規(guī)則，不包含屬性，那么該混合器就可以在文檔的頂部調(diào)用，用于全局。
4-3 混合器傳參 
可以看出，混合器和函數(shù)很像，需要定義，也可以調(diào)用，現(xiàn)在又說(shuō)可以傳參?。?/pre>

// sass語(yǔ)句
// 混合器定義
@mixin link-colors($normal, $hover, $visited) 
  color: $normal
  &:hover 
    color: $hover
  &:visited
    color: $visited

// 混合器調(diào)用
a 
  @include link-colors(blue, red, green)

// 編譯后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

5 選擇器繼承
5-1 選擇器繼承

// sass語(yǔ)句
.error 
  border: 1px solid red
  background-color: #fdd

.seriousError 
  @extend .error
  border-width: 3px


這樣.seriousError就有了.error的所有屬性

5-2 組合選擇器的繼承

// sass語(yǔ)句

//應(yīng)用到.seriousError a
.error a  
  color: red
  font-weight: 100

//應(yīng)用到hl.seriousError
h1.error  
  font-size: 1.2rem

.seriousError 
  @extend .error
  border-width: 3px


.seriousError不僅會(huì)繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會(huì)被.seriousError以組合選擇器的形式繼承

6 注釋

在css中，我們通常是用/ ... /來(lái)注釋，這樣的注釋被解析出來(lái)還會(huì)出現(xiàn)在css文件中。
在sass中，可以使用 // 開頭的注釋來(lái)進(jìn)行靜默注釋，這樣的注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中。

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

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

相關(guān)文章

  • Sass 語(yǔ)法格式及編譯

    摘要：一語(yǔ)法格式這里說(shuō)的語(yǔ)法是的最初語(yǔ)法格式，他是通過(guò)鍵控制縮進(jìn)的一種語(yǔ)法規(guī)則，而且這種縮進(jìn)要求非常嚴(yán)格。在此特別提醒新同學(xué)只能使用老語(yǔ)法規(guī)則縮進(jìn)規(guī)則，使用的是的新語(yǔ)法規(guī)則，也就是語(yǔ)法規(guī)則類似語(yǔ)法格式。一、sass語(yǔ)法格式 這里說(shuō)的?Sass 語(yǔ)法是 Sass 的最初語(yǔ)法格式，他是通過(guò) tab 鍵控制縮進(jìn)的一種語(yǔ)法規(guī)則，而且這種縮進(jìn)要求非常嚴(yán)格。另外其不帶有任何的分號(hào)和大括號(hào)。常常把這種格式稱為 ...

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

  • Sass 語(yǔ)法小結(jié)

    摘要：本文主要對(duì)的基本語(yǔ)法進(jìn)行了小結(jié)，方便日后快速查閱使用。另外，因?yàn)榈恼Z(yǔ)法完全兼容，所以可以把原始的文件改名為后綴，即可直接導(dǎo)入了。為了解決這個(gè)問題，允許通過(guò)語(yǔ)法的形式指定每個(gè)參數(shù)的值。后記功能豐富強(qiáng)大，上面的語(yǔ)法小結(jié)只是其中的一小部分。 本文主要對(duì) Sass 的基本語(yǔ)法進(jìn)行了小結(jié)，方便日后快速查閱使用。 一、變量（$） 1. 變量標(biāo)識(shí)符 Sass 使用 $ 符號(hào)來(lái)標(biāo)識(shí)變量。 $highl...

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

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

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

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

  • sass筆記-2|Sass基礎(chǔ)語(yǔ)法之讓樣式表更具條理性和可讀性

    摘要：這個(gè)時(shí)候小明如果僅僅引入不想改，那么就是這個(gè)值，如果他想改，就可以在任何一處重新聲明這個(gè)變量，那么就會(huì)變成小明的值。 這一篇主要詳述保持sass條理性和可讀性的3個(gè)最基本方法——嵌套、導(dǎo)入和注釋。 零. 變量 變量本身的作用是為了保持屬性值的可維護(hù)性，把所有需要維護(hù)的屬性值放在同一個(gè)地方，快速更改，處處生效，可謂售后無(wú)憂。 1.變量聲明 變量用$符號(hào)開頭進(jìn)行聲明，任何可以用作CSS屬性...

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

  • Sass快速入門學(xué)習(xí)筆記

    摘要：在中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。這個(gè)過(guò)程中，用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個(gè)個(gè)打開。與此類似，會(huì)命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個(gè)重要特性就是它為css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書寫這一屬性值?；蛘?，對(duì)于僅使用過(guò)一 次的屬...

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

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

0條評(píng)論

Magicer

男|高級(jí)講師

TA的文章

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