SCSS 常用屬性合集

1、規則嵌套

Sass 允許將一套 css 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器，例如：

#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } }

編譯為：

#main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; }

 

2、父選擇器

在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選擇器，例如，當給某個元素設定 hover 樣式時，或者當 body 元素有某個 classname 時，可以用 & 代表嵌套規則外層的父選擇器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

編譯為

a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; }

 

3、嵌套屬性

有些 CSS 屬性遵循相同的命名空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。為了便於管理這樣的屬性，同時也為了避免了重復輸入，Sass 允許將屬性嵌套在命名空間中，例如：

.funky { font: { family: fantasy; size: 30em; weight: bold; } }

編譯為

.funky { font-family: fantasy; font-size: 30em; font-weight: bold; }

 

4、變量 $ (variables: $)

SassScript 最普遍的用法就是變量，變量以美元符號開頭，賦值方法與 CSS 屬性的寫法一樣：

$width: 5em; // 使用 #main { width: $width; }

編譯為：

#main { width: 5em }

 

5、運算

SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。

p { width: 1in + 8pt; }

編譯為

p { width: 1.111in; }

 

6、變量定義 !default (variable Defaults: !default)

可以在變量的結尾添加 !default 給一個未通過 !default 聲明賦值的變量賦值，此時，如果變量已經被賦值，不會再被重新賦值，但是如果變量還沒有被賦值，則會被賦予新的值。

$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"; }

 

7、@import

Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合並編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。

@import "foo.scss"; // 或 @import "foo";

Sass 允許同時導入多個文件，例如同時導入 rounded-corners 與 text-shadow 兩個文件：

@import "rounded-corners", "text-shadow";

 

8、@media

Sass 中 @media 指令與 CSS 中用法一樣，只是增加了一點額外的功能：允許其在 CSS 規則中嵌套。如果 @media 嵌套在 CSS 規則內，編譯時，@media 將被編譯到文件的最外層，包含嵌套的父選擇器。這個功能讓 @media 用起來更方便，不需要重復使用選擇器，也不會打亂 

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

編譯為

@media screen and (orientation: landscape) { .sidebar { width: 500px; } }

 

9、@extend

在設計網頁的時候常常遇到這種情況：一個元素使用的樣式與另一個元素完全相同，但又添加了額外的樣式。通常會在 html 中給元素定義兩個 class，一個通用樣式，一個特殊樣式。假設現在要設計一個普通錯誤樣式與一個嚴重錯誤樣式，一般會這樣寫：

.father{
    color: yellow;
    font-size: 18px;
  }
  .son{
    @extend .father;
    font-weight: bold;
  }

編譯為

.son{ color: yellow; font-size: 18px; font-weight: bold; }

 

10、控制指令 @if

當 @if 的表達式返回值不是 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 聲明失敗，Sass 將逐條執行 @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; }

 

11、@for

@for 指令可以在限制的范圍內重復輸出格式，每次按要求（變量的值）對輸出結果做出變動。這個指令包含兩種格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，區別在於 through 與 to 的含義：當使用 through 時，條件范圍包含 <start> 與 <end> 的值，而使用 to 時條件范圍只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何變量，比如 $i；<start> 和 <end> 必須是整數值。即through前閉后閉 to是前閉后開

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

編譯為

.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

 

12、@each

@each 指令的格式是 $var in <list>, $var 可以是任何變量名，比如 $length 或者 $name，而 <list> 是一連串的值，也就是值列表。

@each 將變量 $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'); }

 

13、@while

@while 指令重復輸出格式直到表達式返回結果為 false。這樣可以實現比 @for 更復雜的循環，只是很少會用到。例如：

$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; }

 

14、定義混合樣式指令 @mixin

混合指令的用法是在 @mixin 后添加名稱與樣式，比如名為 large-text 的混合通過下面的代碼定義：

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }

混合也需要包含選擇器和屬性，甚至可以用 & 引用父選擇器：

@mixin clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } }

引用混合樣式 @include

.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; }

資源搜索網站大全 https://www.renrenfan.com.cn

15、混合樣式指令的參數

參數用於給混合指令中的樣式設定變量，並且賦值使用。在定義混合指令的時候，按照變量的格式，通過逗號分隔，將參數寫進圓括號里。引用指令時，按照參數的順序，再將所賦的值對應寫進括號：

@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; }

 

16、函數指令 (Function Directives)

Sass 支持自定義函數，並能在任何屬性值或 Sass script 中使用：

$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; }