Sass和Scss常接觸的一些好處/優點

目錄

• • 一、CSS 功能拓展
  • • • 1、允許嵌套
      • 2、父選擇器 &
      • 3、屬性嵌套
      • 4、占位符選擇器 %
  • 二、注釋 /* */ 與 //
  • 三、SassScript
  • • • 1、變量 $
      • 2、運算
      • 3、圓括号
  • 四、@-Rules 與指令
  • • • 1、@import
      • 2、@media
      • 3. @extend繼承
  • 五、控制指令
  • • • 1、@if
      • 2、@for

Scss (Sassy CSS)，一款css預處理語言，SCSS 是 Sass 3 引入新的文法，其文法完全相容 CSS3，并且繼承了 Sass 的強大功能。也就是說，任何标準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 檔案。SCSS 需要使用分号和花括号而不是換行和縮進。SCSS 對空白符号不敏感，其實就和css3文法一樣，其字尾名是分别為 .scss。

一、CSS 功能拓展

1、允許嵌套

允許将一套 CSS 樣式嵌套進另一套樣式中，内層的樣式将它外層的選擇器作為父選擇器，例如：

.main p {
  color: #00ff00;
  width: 97%;
  .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、占位符選擇器 %

Sass 額外提供了一種特殊類型的選擇器：占位符選擇器 (placeholder selector)。與常用的 id 與 class 選擇器寫法相似，隻是 # 或 . 替換成了 %。必須通過 @extend 指令調用。（在下面@extend子產品舉例子）

二、注釋 /* */ 與 //

支援标準的 CSS 多行注釋 /* */，以及單行注釋 //，前者會 被完整輸出到編譯後的 CSS 檔案中，而後者則不會

/* This comment is
 * several lines long. */
body { color: black; }

// These comments are only one line long each.
a { color: green; }

//編譯為

/* This comment is
 * several lines long. */
body { color: black; }
a { color: green; }
           

三、SassScript

1、變量 $

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

$width: 5em;
.main {
  width: $width;
}
// 編譯為
.main {
  width: 5em;
}
           

2、運算

所有資料類型均支援相等運算 == 或 !=，此外，每種資料類型也有其各自支援的運算方式。

p { width: 1in + 8pt; }
// 編譯為
p { width: 1.111in; }
           

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
//編譯為
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}
           

p { color: #010203 + #040506; }
// 計算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然後編譯為
p { color: #050709; }

p { color: #010203 * 2; }
// 計算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然後編譯為
p { color: #020406; }
           

p { margin: 3px + 4px auto; }
// 編譯為
p { margin: 7px auto; }

p:before { content: "I ate #{5 + 10} pies!"; }
//編譯為
p:before { content: "I ate 15 pies!"; }

$value: null;
p:before { content: "I ate #{$value} pies!"; }
// 空的值被視作插入了空字元串，編譯為
p:before { content: "I ate pies!"; }
           

3、圓括号

p { width: 1em + (2em * 3); }
// 編譯為
p { width: 7em; }
           

四、@-Rules 與指令

1、@import

@import "foo.scss"; //引入外部樣式
           

假設 example.scss 檔案包含以下樣式：

.example { color: red; }

然後導入到 #main 樣式内

#main { @import “example”; }

将會被編譯為

#main .example { color: red; }

2、@media

.sidebar { width: 300px; @media screen and (orientation:

landscape) {

width: 500px; } }

3. @extend繼承

@extend讓你能夠在多個選擇器中通過繼承的方式共享一段樣式:
.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* error specific styles... */
}

.info-icon {
  @extend .icon;
  /* info specific styles... */
}
           

//編譯為

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}
           

如果你不想要.icon這個類，那就改為%icon,将編譯為

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}
           

五、控制指令

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

2、@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//編譯為
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }