高清有码在线观看,日韩91三级

大綱

1、嵌套規(guī)則(Nested Rules)
2、父選擇符： &
3、嵌套屬性
4、SassScript
5、@ 規(guī)則和指令
6、控制指令(Control Directives)
7、Mixin Directives
8、Function Directives

1、嵌套規(guī)則(Nested Rules)

Sass允許CSS規(guī)則相互嵌套。內(nèi)部規(guī)則只應用于外部規(guī)則的選擇器。
這有助于避免重復父選擇器，并使具有許多嵌套選擇器的復雜CSS布局更加簡單。

#main {
  width: 97%;
  p,
  div {
    font-size: 2em;
    a {
      font-weight: bold;
    }
  }
  pre {
    font-size: 3em;
  }
}
/*
    scss編譯為：css語法
*/
#main {
  width: 97%;
}
#main p,
#main div {
  font-size: 2em;
}
#main p a,
#main div a {
  font-weight: bold;
}
#main pre {
  font-size: 3em;
}

2、父選擇符： &

當選擇器擁有某種特殊效果(如懸停)或者父選擇器有特定類的時候，需要對這些情況設置某種樣式，在這些情況下，可以使用&字符顯式指定應該插入父選擇器的位置。
& 在編譯時將被替換為父選擇符，輸出到 CSS 中。也就是說，如果你有一個深層嵌套的規(guī)則，父選擇符也會在 & 被替換之前被完整的解析。

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover {
      color: red;
    }
  }
}
/*
    編譯為
*/
#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}

3、嵌套屬性

CSS有相當多的屬性位于“名稱空間”中;
例如，font-family、font-size和font-weight都位于font(字體)名稱空間中。
在CSS中，如果想在相同的名稱空間中設置一些屬性，每次都必須鍵入它。Sass為此提供了一個快捷方式:只需編寫一次名稱空間，然后在其中嵌套每個子屬性。

/*
    scss
*/
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
/*
    編譯為：
*/
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

4、SassScript

除了普通的CSS屬性語法，Sass還支持一組名為SassScript的擴展。

SassScript允許屬性使用變量、算術(shù)和其他函數(shù)。SassScript可以用于任何屬性值。
SassScript還可以用來生成選擇器和屬性名，這在編寫mixin時非常有用。這是通過插值來實現(xiàn)的。

4.1、算術(shù)

>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

4.2、Variables(變量): $

/*
    使用SassScript最直接的方法是使用變量。變量以美元符號開頭，設置類似CSS屬性
*/
$width: 5em;
/*
    然后你可以在屬性中引用它們:
*/
#main {
  width: $width;
}
/*
    變量只能在定義變量的嵌套選擇器級別內(nèi)可用。如果它們是在任何嵌套選擇器之外定義的，
那么它們在任何地方都是可用的。
*/

4.3、函數(shù)

/*
    SassScript 定義了一些有用的函數(shù)， 這些函數(shù)可以像普通 CSS 函數(shù)語法一樣被調(diào)用：
*/
p {
  color: hsl(0, 100%, 50%);
}
/*
    被編譯為：
*/
p {
  color: #ff0000;
}
/*
    關鍵詞參數(shù):
        Sass 函數(shù)允許指定明確的關鍵詞參數(shù) (keyword arguments) 進行調(diào)用。 
        雖然不夠簡明，但可以讓樣式表閱讀起來會更方便。 關鍵詞參數(shù)讓函數(shù)具有更靈活的接口，
即便參數(shù)眾多，也不會讓使用變得困難。
        命名參數(shù)（named arguments）可以以任意順序傳入，并且，具有默認值的參數(shù)可以省略掉。 
由于命名參數(shù)也是變量名稱，因此，下劃線、短橫線可以交換使用。
*/
/*
    上面的例子也可以寫成：
*/
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

4.4、Interpolation(插值): #{}

/*
    可以在選擇器和屬性名中使用SassScript變量，使用#{}插值語法:
*/
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
/*
    被編譯為：
*/
p.foo {
  border-color: blue;
}

4.5、變量默認值： !default

/*
    你可以在變量尚未賦值前，通過在值的末尾處添加 !default 標記來為其指定。 也就是說，
如果該變量已經(jīng)被賦值， 就不會再次賦值， 但是，如果還沒有被賦值，就會被指定一個值。
*/
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
/*
    被編譯為：
*/
#main {
  content: "First content";
  new-content: "First time reference";
}

/*
    變量的值如果是 null 的話，會被 !default 當做沒有值：
*/
$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}
/*
    被編譯為：
*/
#main {
  content: "Non-null content";
}

5、@ 規(guī)則和指令

Sass 支持所有 CSS3 的 @ 規(guī)則，以及一些 Sass 專屬的規(guī)則，也被稱為“指令（directives）”。這些規(guī)則在 Sass 中具有不同的功效。

5.1、@import

Sass 擴展了 CSS 的 @import 規(guī)則，讓它能夠引入 SCSS 和 Sass 文件。所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個單一的 CSS 文件。另外，被導入的文件中所定義的變量或 mixins 都可以在主文件中使用。

@import 根據(jù)文件名引入。默認情況下，它會尋找 Sass 文件并直接引入，但是，在少數(shù)幾種情況下，它會被編譯成 CSS 的 @import 規(guī)則：
i：如果文件的擴展名是 .css。
ii：如果文件名以 http:// 開頭。
iii：如果文件名是 url()。
iv：如果 @import 包含了任何媒體查詢（media queries）。
如果上述情況都沒有出現(xiàn)，并且擴展名是 .scss 或 .sass，該名稱的 Sass 或 SCSS 文件就會被引入。如果沒有擴展名， Sass 將試著找出具有 .scss 或 .sass 擴展名的同名文件并將其引入。

/*
    兩者都將引入 foo.scss 文件
*/
@import "foo.scss";
@import "foo";

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
/*
    將被編譯為：
*/
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

/*
    也可以通過一個 @import 引入多個文件。
*/
@import "rounded-corners", "text-shadow";
/*
    將引入 rounded-corners 和 text-shadow 兩個文件。
*/

5.2、片段

如果你有一個 SCSS 或 Sass 文件需要引入，但是你又不希望它被編譯為一個 CSS 文件，這時，你就可以在文件名前面加一個下劃線，就能避免被編譯。這將告訴 Sass 不要把它編譯成 CSS 文件。然后，你就可以像往常一樣引入這個文件了，而且還可以省略掉文件名前面的下劃線。

/*
    例如，你有一個文件叫做 _colors.scss。 這樣就不會生成 _colors.css 文件了 
    而且你還可以這樣做：
*/
@import "colors";
/*
    來引入 _colors.scss 文件。
*/

注意，在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。例如， _colors.scss 不能與 colors.scss 并存。

5.3、嵌套 @import

雖然大部分時間只需在頂層文件使用 @import 就行了，但是，你還可以把他們包含在 CSS 規(guī)則和 @media 規(guī)則中。

/*example.scss*/
.example {
  color: red;
}
/* use */
#main {
  @import "example";
}
/* 編譯為 */
#main .example {
  color: red;
}

5.4、@media

Sass中的@media指令就像普通CSS中的指令一樣，有一個額外的功能:它們可以嵌套在CSS規(guī)則中。如果@media指令出現(xiàn)在CSS規(guī)則中，它將冒泡到樣式表的頂層，將所有選擇器放到規(guī)則中。這使得添加特定于媒體的樣式變得很容易，而無需重復選擇器或中斷樣式表的流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
  .header {
    width: 300px;
    @media screen and (orientation: landscape) {
      width: 500px;
    }
  }
}
/* 編譯為： */
.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}
.sidebar .header {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar .header {
    width: 500px;
  }
}

@media查詢也可以相互嵌套。然后將使用and操作符組合查詢。

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
/* 編譯為： */
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

@media查詢可以包含SassScript表達式(包括變量、函數(shù)和操作符)來代替特性名稱和特性值。

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
/* 編譯為: */
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}

5.5、@extend

在設計頁面時，經(jīng)常會遇到這樣的情況:一個類應該擁有另一個類的所有樣式，以及它自己的特定樣式。處理這個問題最常見的方法是在HTML中使用更通用的類和更特定的類。

/*
  例如，假設我們有一個針對正常錯誤和嚴重錯誤的設計。我們可以這樣寫我們的標記:
*/
<div class="error seriousError">
  Oh no! You've been hacked!
</div>

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
/*
    不幸的是，這意味著我們必須始終記住在. seriouserror中使用.error。這是一個維護負擔，
會導致一些棘手的bug，并可能將非語義樣式的關注點引入標記。

    @extend指令通過告訴Sass一個選擇器應該繼承另一個選擇器的樣式來避免這些問題。
*/
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
/* 編譯為： */
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

/*
    這意味著，除了. seriouserror特有的樣式外，為.error定義的所有樣式也應用于. seriouserror
實際上，每個擁有類. seriouserror的元素都有類.error。
*/
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
/* 編譯為： */
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px;
}

5.5.1、復雜選擇器的繼承(Extending Complex Selectors)

/*
    類選擇器不是惟一可以擴展的東西。可以擴展只涉及單個元素的任何選擇器，
例如 .special.cool, a:hover, or a.user[href^="http://"]
*/
.hoverlink {
  @extend a:hover;
}
/*
    與類一樣，這意味著為a:hover定義的所有樣式也應用于.hoverlink。
*/
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
/* 被編譯為： */
a:hover, .hoverlink {
  text-decoration: underline;
}

/*
    就像上面的.error.intrusion一樣，任何使用:hover的規(guī)則也適用于.hoverlink，
即使它們也有其他選擇器。
*/
.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
/* 被編譯為： */
.comment a.user:hover,
.comment .user.hoverlink {
  font-weight: bold;
}

5.5.2、多繼承(Multiple Extends)

/*
    單個選擇器可以擴展多個選擇器。這意味著它繼承了所有擴展選擇器的樣式。
*/
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}
/* 編譯為：*/
.error,
.seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.attention,
.seriousError {
  font-size: 3em;
  background-color: #ff0;
}

.seriousError {
  border-width: 3px;
}
/*
    實際上，每個帶有類.seriouserror的元素都有類.error和類.attention。
因此，文檔中稍后定義的樣式優(yōu)先:.seriouserror的背景色是#ff0，而不是#fdd，
因為.attention是在.error之后定義的。

    還可以使用逗號分隔的選擇器列表編寫多個擴展。
例如@extend .error,.attention與@extend .error;@extend.attention相同。
*/

5.5.3、鏈接擴展(Chaining Extends)

/*
    一個選擇器可以擴展另一個選擇器，而另一個選擇器又可以擴展第三個選擇器。
*/
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

/* 編譯為：*/
.error,
.seriousError,
.criticalError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError,
.criticalError {
  border-width: 3px;
}

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

5.5.4、選擇器序列(Selector Sequences)

/*
    選擇器序列，例如.foo .bar或.foo + .bar，目前無法擴展。
但是，嵌套選擇器本身也可以使用@extend。
*/
#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
/* 編譯為：*/
a,
#fake-links .link {
  color: blue;
}
a:hover,
#fake-links .link:hover {
  text-decoration: underline;
}

5.5.5、合并選擇序列

有時選擇器序列會擴展另一個序列中出現(xiàn)的另一個選擇器。在這種情況下，這兩個序列需要合并。
雖然在技術(shù)上可以生成所有可能匹配這兩個序列的選擇器，但是這會使樣式表太大。例如，上面的簡單示例需要10個選擇器。相反，Sass只生成可能有用的選擇器。

/*
    當合并的兩個序列沒有共同的選擇器時，就會生成兩個新的選擇器:一個在第二個序列之前有
第一個序列，另一個在第一個序列之前有第二個序列。
*/
#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}
/* 編譯為 */
#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold;
}

/*
    如果兩個序列確實共享一些選擇器，那么這些選擇器將合并在一起，只有差異(如果仍然存在的話)
將交替出現(xiàn)。在本例中，兩個序列都包含id #admin，因此生成的選擇器將合并這兩個id:
*/
#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}
/* 編譯為： */
#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold;
}

5.5.6、只繼承選擇器(@extend-Only Selectors)

有時候，您會為一個類編寫樣式，而這個類只需要@extend，而不需要直接在HTML中使用。在編寫Sass庫時尤其如此，如果用戶需要，您可以為他們提供@extend樣式，如果用戶不需要，您可以忽略。
如果為此使用普通類，那么在生成樣式表時就會創(chuàng)建許多額外的CSS，并有可能與HTML中使用的其他類發(fā)生沖突。這就是為什么Sass支持“占位符選擇器”(例如%foo)。
占位符選擇器看起來像類和id選擇器，除了 # or . 替換為%。它們可以在類或id可以使用的任何地方使用，并且它們本身可以防止規(guī)則集被呈現(xiàn)到CSS。

/* This ruleset won't be rendered on its own. */
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
/*
    但是，占位符選擇器可以擴展，就像類和id一樣。將生成擴展的選擇器，
但不會生成基本占位符選擇器。
*/
.notice {
  @extend %extreme;
}
/*
    以上單獨存在沒有效果,Sass也不會編譯出來,只有兩者共同存在才會進行編譯,
    簡單的理解就是：類notice繼承了#context a的類,或者可以理解為notice在#context a的基礎上
擴展
*/
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

5.5.7、可選標志(The !optional Flag)

通常在擴展選擇器時，如果@extend不起作用，就會出現(xiàn)錯誤。例如，如果你寫a.important{@extend .notice}，如果沒有包含.notice的選擇器，這是一個錯誤。如果唯一包含.notice的選擇器是h1，這也是一個錯誤。注意，由于h1與a沖突，因此不會生成新的選擇器。
但是，有時您希望允許@extend不產(chǎn)生任何新的選擇器。為此，只需在選擇器之后添加!optional標志。

// 不加 !optional 會報錯
a.important {
  @extend .notice !optional;
}

a.important {
  @extend .notice!optional;
}

h1.notice {
  color: red;
}
/* 編譯為*/
h1.notice {
  color: red;
}
// 注意.notice是h1標簽上的，與下面的代碼是有區(qū)別的
a.important {
  @extend .notice!optional;
}
h1 .notice {
  color: red;
}
/* 編譯為：*/
h1 .notice, h1 a.important {
  color: red;
}

5.5.8、指令中的繼承(@extend in Directives)

在@media等指令中使用@extend有一些限制。Sass無法使@media塊之外的CSS規(guī)則應用于它內(nèi)部的選擇器，除非通過到處復制樣式來創(chuàng)建大量樣式表膨脹。這意味著如果你在@media(或其他CSS指令)中使用@extend，你只能擴展出現(xiàn)在同一個指令塊中的選擇器。

/* 正確使用 */
@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}
/* 錯誤使用 */
.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

5.6、@debug

@debug指令將SassScript表達式的值打印到標準錯誤輸出流。它對于調(diào)試具有復雜SassScript的Sass文件非常有用。

@debug 10em + 12em;
/* outputs: */
Line 1 DEBUG: 22em

5.7、@warn

@warn指令將SassScript表達式的值打印到標準錯誤輸出流。對于需要提醒用戶注意棄用或從輕微混合使用錯誤中恢復的庫，它非常有用。@warn和@debug之間有兩個主要區(qū)別:
1、您可以使用 ——quiet命令行選項或:quiet Sass選項關閉警告。
2、樣式表跟蹤將與消息一起打印出來，以便被警告的用戶可以看到他們的樣式在哪里引起警告。

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

6、控制指令(Control Directives)

SassScript支持基本的控制指令，用于只在某些條件下包含樣式，或者多次包含相同的樣式，并帶有變體。
注意，控制指令是一個高級特性，在日常樣式化過程中不推薦使用。它們主要用于mixin中，特別是那些屬于Compass這樣的庫的部分，因此需要很大的靈活性。

6.1、@if

/*
    @if指令使用SassScript表達式，如果表達式返回的不是false或null，則使用嵌套在其下的樣式:
*/
p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
/* 編譯為 */
p {
  border: 1px solid;
}

/*
    @if語句后面可以跟著幾個@else if語句和一個@else語句。
如果@if語句失敗，則按順序嘗試@else If語句，直到成功或到達@else為止。例如:
*/
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
/* 編譯為： */
p {
  color: green;
}

6.2、@for

/*
    for指令重復輸出一組樣式。對于每個重復項，計數(shù)器變量用于調(diào)整輸出。
    這個指令有兩種形式:@for $var，從<start>到<end>; @for $var，從<start>到<end>。
    注意關鍵字through和to的區(qū)別。
    $var可以是任何變量名，比如$i;
    <start>和<end>是應該返回整數(shù)的SassScript表達式。

    @for語句將$var設置為指定范圍內(nèi)的每個連續(xù)數(shù)字，每次使用$var的值輸出嵌套樣式。
    對于from ... through，范圍包括<start>和<end>的值，
    但是from ... to，范圍運行到但不包括<end>的值。
*/
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
/* 編譯為 */
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

6.3、@each

/*
    $var可以是任何變量名，比如$length或$name，它是一個返回列表的SassScript表達式。

    @each規(guī)則將$var設置為列表中的每個項目，然后使用$var的值輸出它包含的樣式。例如:
*/
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url("/images/#{$animal}.png");
  }
}

/* 編譯為： */

.puma-icon {
  background-image: url("/images/puma.png");
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}
.egret-icon {
  background-image: url("/images/egret.png");
}
.salamander-icon {
  background-image: url("/images/salamander.png");
}

6.4、@while

/*
    while指令接受一個SassScript表達式并重復輸出嵌套樣式，直到語句計算為false為止。
這可以用來實現(xiàn)比@for語句更復雜的循環(huán)，盡管這很少是必需的。例如:
*/
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

/* 編譯為： */
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

7、Mixin Directives

mixin允許您定義可以在整個樣式表中重用的樣式，而不需要求助于.float-left之類的非語義類。mixin還可以包含完整的CSS規(guī)則，以及Sass文檔中其他任何允許的內(nèi)容。它們甚至可以使用參數(shù)，允許您使用非常少的混合創(chuàng)建各種風格。

7.1、定義一個Mixin:Defining a Mixin: @mixin

/*
    mixin是用@mixin指令定義的。后面是mixin的名稱和可選的參數(shù)，以及包含mixin內(nèi)容的塊。
例如，large-text Mixin的定義如下:
*/
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

/*
    mixin也可能包含選擇器，可能與屬性混合。選擇器甚至可以包含父引用。例如:
*/
@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & {
    height: 1px;
  }
}

7.2、引入一個Mixin：Including a Mixin: @include

/*
    mixin包含在帶有@include指令的文檔中。它接受mixin的名稱和可選的參數(shù)，
并將由mixin定義的樣式包含到當前規(guī)則中。例如:
*/
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
/*編譯為：*/
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

/*
    只要mixin不直接定義任何屬性或使用任何父引用，
它也可以包含在任何規(guī)則之外(即在文檔的根目錄下)。例如:
*/
@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;
/* 編譯為 */
a {
  color: blue;
  background-color: red;
}
/*
    Mixin定義還可以包括其他Mixin。例如:
*/
@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
/*
    Mixin不得直接或間接地包括其本身。也就是說，mixin遞歸是禁止的。

    僅定義派生選擇器的mixin可以安全地混合到文檔的最頂層。
*/

7.3、參數(shù)：Arguments

/*
    mixin可以將參數(shù)SassScript值作為參數(shù)，這些參數(shù)在包含mixin時給出，
并在mixin中作為變量提供。

    在定義mixin時，參數(shù)被寫成由逗號分隔的變量名，所有參數(shù)都放在名稱后面的括號中。然后，
在包含mixin時，可以以相同的方式傳入值。例如:
*/
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p {
  @include sexy-border(blue, 1in);
}

/* 編譯為 */
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

/*
    mixin還可以使用常規(guī)的變量設置語法為其參數(shù)指定默認值。然后，當包含mixin時，
如果它沒有傳入該參數(shù)，則將使用默認值。例如:
*/
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue);
}
h1 {
  @include sexy-border(blue, 2in);
}
/* 編譯為 */
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

/*
    關鍵字參數(shù)

    還可以使用顯式關鍵字參數(shù)包含mixin。例如，我們上面的例子可以寫成:
*/
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border($color: blue);
}
h1 {
  @include sexy-border($color: blue, $width: 2in);
}
/*
    雖然這不夠簡潔，但可以使樣式表更易于閱讀。它還允許函數(shù)提供更靈活的接口，
提供許多參數(shù)，而不會變得難以調(diào)用。
    命名參數(shù)可以按任何順序傳遞，具有默認值的參數(shù)可以省略。
由于命名參數(shù)是變量名，下劃線和破折號可以互換使用。
*/

7.4、變量參數(shù)

/*
    有時mixin接受數(shù)量未知的參數(shù)是有意義的。例如，用于創(chuàng)建框陰影的mixin可以將任意數(shù)量的陰影
作為參數(shù)。對于這些情況，Sass支持“變量參數(shù)”，它是mixin聲明末尾的參數(shù)，它將所有剩余的參數(shù)打包
成一個列表。這些參數(shù)看起來會像正常的參數(shù)一樣，只要這些參數(shù)以...為結(jié)尾，例如:
*/
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
/* 編譯為： */
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

/*
    在調(diào)用mixin時也可以使用變量參數(shù)。使用相同的語法，您可以展開一個值列表，
以便將每個值作為單獨的參數(shù)傳遞。例如:
*/
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
/* 編譯為 */
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

/*
    您可以使用變量參數(shù)來包裝mixin并添加其他樣式，而無需更改mixin的參數(shù)簽名。如果這樣做，
甚至關鍵字參數(shù)也會傳遞到包裝的mixin。例如:
*/
@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  // The $width argument will get passed on to "stylish-mixin" as a keyword
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

7.5、將內(nèi)容塊傳遞給Mixin(Passing Content Blocks to a Mixin)

/*
    可以將一個樣式塊傳遞給mixin，以便將其放置在mixin包含的樣式中。樣式將出現(xiàn)在mixin中找到
的任何@content指令的位置。這使得定義與選擇器和指令的構(gòu)造相關的抽象成為可能。
*/
@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
/* 編譯為： */
* html #logo {
  background-image: url(/logo.gif);
}

/*
    可以使用.sass簡寫語法進行相同的混合:
*/
=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)
/*
    注意:當@content指令不止一次指定或在循環(huán)中指定時，樣式塊將在每次調(diào)用時復制。
*/
/*
    可變范圍和內(nèi)容塊

    傳遞給mixin的內(nèi)容塊是在定義該塊的范圍內(nèi)計算的，而不是在mixin的范圍內(nèi)。
這意味著mixin的局部變量不能在傳遞的樣式塊中使用，變量將解析為全局值:
*/
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors {
    color: $color;
  }
}
/* 編譯為：*/
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}
/*
    此外，這清楚地表明，在傳遞的塊中使用的變量和mixin與定義塊的其他樣式相關。例如:
*/
#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

8、Function Directives

/*
    可以在sass中定義自己的函數(shù)，并在任何值或腳本上下文中使用它們。例如:
*/
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar {
  width: grid-width(5);
}
/* 編譯為： */
#sidebar {
  width: 240px;
}

/*
    正如您所看到的，函數(shù)可以訪問任何全局定義的變量，也可以像mixin一樣接受參數(shù)。
函數(shù)可能包含多個語句，必須調(diào)用@return來設置函數(shù)的返回值。

    與mixin一樣，您可以使用關鍵字參數(shù)調(diào)用sass定義的函數(shù)。在上面的例子中，
我們可以這樣調(diào)用這個函數(shù):
*/
#sidebar {
  width: grid-width($n: 5);
}
/*
    建議在函數(shù)前面加上前綴，以避免命名沖突，以便樣式表的讀者知道它們不是Sass或CSS的一部分。
例如，如果您為ACME Corp工作，您可能會將該函數(shù)命名為-acme-grid-width以上的函數(shù)。

    用戶定義的函數(shù)也以與mixin相同的方式支持變量參數(shù)。
*/

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Sass(SCSS)中文手冊——語法

大綱

1、嵌套規(guī)則(Nested Rules)

2、父選擇符： &

3、嵌套屬性

4、SassScript

4.1、算術(shù)

4.2、Variables(變量): $

4.3、函數(shù)

4.4、Interpolation(插值): #{}

4.5、變量默認值： !default

5、@ 規(guī)則和指令

5.1、@import

5.2、片段

5.3、嵌套 @import

5.4、@media

5.5、@extend

5.5.1、復雜選擇器的繼承(Extending Complex Selectors)

5.5.2、多繼承(Multiple Extends)

5.5.3、鏈接擴展(Chaining Extends)

5.5.4、選擇器序列(Selector Sequences)

5.5.5、合并選擇序列

5.5.6、只繼承選擇器(@extend-Only Selectors)

5.5.7、可選標志(The !optional Flag)

5.5.8、指令中的繼承(@extend in Directives)

5.6、@debug

5.7、@warn

6、控制指令(Control Directives)

6.1、@if

6.2、@for

6.3、@each

6.4、@while

7、Mixin Directives

7.1、定義一個Mixin:Defining a Mixin: @mixin

7.2、引入一個Mixin：Including a Mixin: @include

7.3、參數(shù)：Arguments

7.4、變量參數(shù)

7.5、將內(nèi)容塊傳遞給Mixin(Passing Content Blocks to a Mixin)

8、Function Directives

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、嵌套規(guī)則(Nested Rules)

2、父選擇符： &

4、SassScript

4.1、算術(shù)

4.2、Variables(變量): $

4.3、函數(shù)

4.5、變量默認值： !default

5、@ 規(guī)則和指令

5.2、片段

5.3、嵌套 @import

5.4、@media

5.5、@extend

5.5.1、復雜選擇器的繼承(Extending Complex Selectors)

5.5.2、多繼承(Multiple Extends)

5.5.3、鏈接擴展(Chaining Extends)

5.5.5、合并選擇序列

5.5.6、只繼承選擇器(@extend-Only Selectors)

5.5.7、可選標志(The !optional Flag)

5.7、@warn

6.1、@if

6.2、@for

6.3、@each

6.4、@while

7.1、定義一個Mixin:Defining a Mixin: @mixin

7.2、引入一個Mixin：Including a Mixin: @include

7.3、參數(shù)：Arguments

7.4、變量參數(shù)

7.5、將內(nèi)容塊傳遞給Mixin(Passing Content Blocks to a Mixin)

8、Function Directives