15分鐘包會sass終極教程

好好先森發表於2017-10-16

1. 變數宣告;

$highlight-color: #F90;複製程式碼

2. 變數引用;

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}複製程式碼

3. 巢狀CSS 規則;

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}複製程式碼

4. 父選擇器的識別符號&;

錯誤的寫法如下：
article a {
  color: blue;
  :hover { color: red }
}

正確的寫法如下：

article a {
  color: blue;
  &:hover { color: red }
}

編譯後：
article a { color: blue }
article a:hover { color: red }複製程式碼

5. 群組選擇器的巢狀;

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

nav, aside {
  a {color: blue}
}

ps:這樣寫都能編譯複製程式碼

6. 子組合選擇器和同層組合選擇器：>、+和~;

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

同層全體組合選擇器~，選擇所有跟在article後的同層article元素，不管它們之間隔了多少其他元素：

編譯後：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }複製程式碼

7. 巢狀屬性;

在sass中，除了CSS選擇器，屬性也可以進行巢狀。儘管編寫屬性涉及的重複不像編寫選擇器那麼糟糕，但是要反覆寫border-styleborder-widthborder-color以及border-*等也是非常煩人的。在sass中，你只需敲寫一遍border：


nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

編譯後：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}



對於屬性的縮寫形式，你甚至可以像下邊這樣來巢狀，指明例外規則：
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
這比下邊這種同等樣式的寫法要好：
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}複製程式碼

8. 預設變數值;

使用sass的!default標籤可以實現這個目的。它很像css屬性中!important標籤的對立面，不同的是!default用於變數，含義是：如果這個變數被宣告賦值了，那就用它宣告的值，否則就用這個預設值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}複製程式碼

9. 混合器;

混合器使用@mixin識別符號定義。看上去很像其他的CSS @識別符號，比如說@media或者@font-face。這個識別符號給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然後就可以在你的樣式表中通過@include來使用這個混合器，放在你希望的任何地方。

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

編譯後：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}複製程式碼

10. 給混合器傳參;

混合器並不一定總得生成相同的樣式。可以通過在@include混合器時給混合器傳參，來定製混合器生成的精確樣式。當@include混合器時，引數其實就是可以賦值給css屬性值的變數。


@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

當混合器被@include時，你可以把它當作一個css函式來傳參。如果你像下邊這樣寫：

a {
  @include link-colors(blue, red, green);
}


編譯後：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }複製程式碼

11. 預設引數值;

為了在@include混合器時不必傳入所有的引數，我們可以給引數指定一個預設值。引數預設值使用$name: default-value的宣告形式，預設值可以是任何有效的css屬性值，甚至是其他引數的引用，如下程式碼：

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}複製程式碼

12. 使用選擇器繼承來精簡CSS;

用sass的時候，最後一個減少重複的主要特性就是選擇器繼承。基於Nicole Sullivan物件導向的css的理念，選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現，如下程式碼:


//通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上邊的程式碼中，.seriousError將會繼承樣式表中任何位置處為.error定義的所有樣式。以class="seriousError" 修飾的html元素最終的展示效果就好像是class="seriousError error"。相關元素不僅會擁有一個3px寬的邊框，而且這個邊框將變成紅色的，這個元素同時還會有一個淺紅色的背景，因為這些都是在.error裡邊定義的樣式。複製程式碼

相關文章