成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Sass 語法規(guī)則

Magicer / 1031人閱讀

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

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

//變量定義
$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中，需要在在父級中寫入很多子級的不同屬性，可以使用嵌套。
嵌套在sass中顯示可能看不明白，本節(jié)附帶scss語句。
// sass 語句
.contanin
  article
    h1 color: #333
    p margin-bottom: 1.4rem
  aside
    background-color: #abc

// scss 語句
.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 父選擇器的標識符：& 
當想要通過嵌套給父級元素設(shè)置偽類事件時，如果我們這樣寫：
// scss語句
article a {
  color: blue;
  :hover { color: red }
}
這樣的結(jié)果是給article中a鏈接的所有后代添加了hover事件，這肯定不是我們想要的結(jié)果；這時可以使用 & 來獲取父級，如：
// scss語句
article a {
  color: blue;
  &:hover { color: red }
}
這樣就可以實現(xiàn)給article中的a鏈接設(shè)置hover事件
還有一種情況，需要給父選擇器之前添加選擇器時，可以直接在 & 前面加上選擇器，如
// scss語句
#content aside {
  color: red;
  .main & { color: green }
}

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

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

// 編譯后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
感覺并不是很實用，像border,background,translate這些完全可以將所有屬性以此寫在后面。。
3 導(dǎo)入sass 
在sass中可以通過@import "reset"來導(dǎo)入reset.sass文件
3-1 用sass中的部分文件 
在sass中有些sass文件你可能并不想將其轉(zhuǎn)化成css文件，只是為了用于其他地方導(dǎo)入，這時你就可以通過在文件名的前面加一個下劃線_來標記。而且導(dǎo)入的時候可以省略下劃線。
如：想導(dǎo)入_reset.sass文件時，可以在想要導(dǎo)入的位置寫@import "reset";并且導(dǎo)入的文件種的變量都可以被使用。
3-2 默認變量值 
通常在預(yù)設(shè)樣式中都可以使用!default來設(shè)置默認樣式，但是!default用于變量，含義：如果這個扁郎被聲明賦值了，那就用它聲明的值，否則就用這個默認值。
// sass語句
$color: #333 !default
3-3 嵌套導(dǎo)入 
導(dǎo)入一個sass的局部文件，也可以嵌套在一個選擇器中導(dǎo)入，如
// sass語句
.aside
  @import "reset"
這樣的導(dǎo)入，reset.sass中的變量的作用域就只有在.aside中才有效。
4 混合器mixin 4-1 混合器的定義與調(diào)用 
混合器通俗來說就是將一大段樣式賦予一個名字，需要的時候只需調(diào)用這個名字即可（用于瀏覽器兼容處理上很方便）
// sass語句
// 定義
@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的父選擇器標識符&。
如果一個混合器只包含css規(guī)則，不包含屬性，那么該混合器就可以在文檔的頂部調(diào)用，用于全局。
4-3 混合器傳參 
可以看出，混合器和函數(shù)很像，需要定義，也可以調(diào)用，現(xiàn)在又說可以傳參??！
// sass語句
// 混合器定義
@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語句
.error 
  border: 1px solid red
  background-color: #fdd

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

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

5-2 組合選擇器的繼承 
// sass語句

//應(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不僅會繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承

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

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

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

相關(guān)文章

  • Sass 語法格式及編譯

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

    SimpleTriangle 評論0 收藏0

  • Sass 語法小結(jié)

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

    lidashuang 評論0 收藏0

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

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

    Backache 評論0 收藏0

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

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

    CloudDeveloper 評論0 收藏0

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

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

    appetizerio 評論0 收藏0

發(fā)表評論

0條評論

Magicer

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<