国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Sass 語法規則

Magicer / 995人閱讀

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

首先，sass和scss使用同一種語法，但是寫法有所不同。
sass在編寫的時候不適用" { "和" } "來包括，每一句的末尾也不可以用" ; "來結束。
而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中顯示可能看不明白，本節附帶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 父選擇器的標識符：& 
當想要通過嵌套給父級元素設置偽類事件時，如果我們這樣寫：
// scss語句
article a {
  color: blue;
  :hover { color: red }
}
這樣的結果是給article中a鏈接的所有后代添加了hover事件，這肯定不是我們想要的結果；這時可以使用 & 來獲取父級，如：
// scss語句
article a {
  color: blue;
  &:hover { color: red }
}
這樣就可以實現給article中的a鏈接設置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 導入sass 
在sass中可以通過@import "reset"來導入reset.sass文件
3-1 用sass中的部分文件 
在sass中有些sass文件你可能并不想將其轉化成css文件，只是為了用于其他地方導入，這時你就可以通過在文件名的前面加一個下劃線_來標記。而且導入的時候可以省略下劃線。
如：想導入_reset.sass文件時，可以在想要導入的位置寫@import "reset";并且導入的文件種的變量都可以被使用。
3-2 默認變量值 
通常在預設樣式中都可以使用!default來設置默認樣式，但是!default用于變量，含義：如果這個扁郎被聲明賦值了，那就用它聲明的值，否則就用這個默認值。
// sass語句
$color: #333 !default
3-3 嵌套導入 
導入一個sass的局部文件，也可以嵌套在一個選擇器中導入，如
// sass語句
.aside
  @import "reset"
這樣的導入，reset.sass中的變量的作用域就只有在.aside中才有效。
4 混合器mixin 4-1 混合器的定義與調用 
混合器通俗來說就是將一大段樣式賦予一個名字，需要的時候只需調用這個名字即可（用于瀏覽器兼容處理上很方便）
// sass語句
// 定義
@mixin rounded-corners 
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

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

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

// 混合器調用
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語句

//應用到.seriousError a
.error a  
  color: red
  font-weight: 100

//應用到hl.seriousError
h1.error  
  font-size: 1.2rem

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


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

6 注釋

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112892.html

相關文章

  • Sass 語法格式及編譯

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

    SimpleTriangle 評論0 收藏0

  • Sass 語法小結

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

    lidashuang 評論0 收藏0

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

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

    Backache 評論0 收藏0

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

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

    CloudDeveloper 評論0 收藏0

  • Sass快速入門學習筆記

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

    appetizerio 評論0 收藏0

發表評論

0條評論

Magicer

男|高級講師

TA的文章

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