【Sass/SCSS】預加載器中的“軒轅劍”

博客說明

文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯繫本人刪除，謝謝！

說明

隨着前端技術發展的越來越迅速，前端的樣式也需要更加貼近時代的審美，那麼CSS就需要承擔更多的工作，（強調！這不是煽情！這是宣講背景。😄），爲了給CSS懟上去，預加載器出現了，沒錯，CSS用上了武器。Sass/SCSS——預加載器中的“軒轅劍”，這也不是我幫它吹，是它自己說的，下圖爲例。

官網地址：SASS中文網

什麼是Sass，它與SCSS是啥關係

感覺這裏有點繞，這是怎麼回事，明明是SASS，但是很多地方寫的是SCSS，網上一搜SCSS出現的全是SaSS的教程。

Sass (Syntactically Awesome StyleSheets)：

是由buby語言編寫的一款css預處理語言，有嚴格的縮進風格。
和css編寫規範有着很大的出入，是不使用花括號和分號的，這點讓很多前端pym很難接受。

Sass 是一款強化 CSS 的輔助工具，是對 CSS 的擴展，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目，其後綴是.sass。

優點：使用 “縮進” 代替 “花括號” 表示屬性屬於某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認爲這樣做比 SCSS 更容易閱讀，書寫也更快速。

SCSS (Sassy CSS)：

一款css預處理語言，SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。SCSS 需要使用分號和花括號而不是換行和縮進。SCSS 對空白符號不敏感，其實就和css3語法一樣，其後綴名是分別爲 .scss。

此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。

安裝Sass

可以使用 npm來安裝 Sass。

npm install -g sass

Sass變量

變量是一個比較大的改變，Sass 變量可以存儲字符串、數字、顏色值、布爾值、列表、null 值

Sass 變量使用 $ 符號

語法

$variablename: value;

示例

$base-font: Helvetica, sans-serif;
$my-color: red;
$my-font-size: 18px;

body {
  font-family: $base-font;
  font-size: $my-color;
  color: $y-font-size;
}

轉換爲CSS代碼

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

其實就是把變量的使用直接放入對應的值內。

變量的作用域

Sass的變量其實是有作用域的，Sass 變量的作用域只能在當前的層級上有效果

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 裏頭有用，局部作用域
  color: $myColor;  // green
}
p {
  color: $myColor;  // red
}

提升全局變量

Sass 中可以使用 !global關鍵詞來設置變量是全局的

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;  // green
}

p {
  color: $myColor; //  green
}

對於Sass全局變量，可以用一個文件來存儲，然後其他文件@include 來包含該文件，這樣讓代碼結構清晰，修改也比較方便。

Sass的嵌套規則

這個是方便我們書寫的好東西，也是最顯而易見的新增。

嵌套

看看代碼的區別就瞭解了

scss代碼

nav {
  ul {
    margin: 0;
    padding: 20px;
  }
  li {
    color: #FFFFFF;
  }
}

css代碼

nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  color: #FFFFFF;
}

發現下面的這種寫法比較麻煩，主要是對層級表現的不太明顯。

嵌套屬性

在sass中部分屬性也是可以嵌套的。

CSS 屬性中有一些有同樣的前綴，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。這些公共的屬性就可以抽離出來。

// scss
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

// css
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

導入文件@import

在組件化開發的年代，Sass當然也要捲起來，利用@import可以讓我們減少 CSS 重複的代碼，節省開發時間。

語法

@import filename;

與CSS@import的區別

CSS @import 指令在每次調用時，都會創建一個額外的 HTTP 請求。

Sass @import 指令將文件包含在 CSS 中，不需要額外的 HTTP 請求。

下劃線underscore風格命名

Sass的下劃線分割命名，我相信各位pym看了別人開源的代碼也會發現很多吧，類似_partial.scss、_colors.scss ，但是這種命名絕不是閒的蛋疼，恰恰是利用了Sass @import 導入文件的優勢，讓導入的文件不被編譯成CSS。這種風格也叫Sass Partials。

注意：請不要將帶下劃線與不帶下劃線的同名文件放置在同一個目錄下，比如，_colors.scss 和 colors.scss 不能同時存在於同一個目錄下，否則帶下劃線的文件將會被忽略。

混合@mixin

用來分組那些需要在頁面中複用的CSS聲明，可以通過向Mixin傳遞變量參數來讓代碼更加靈活，該特性在添加瀏覽器兼容性前綴的時候非常有用。

示例

@mixin important-text {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

感覺沒啥高大上的啊，是的，其實就是定一個代碼塊，讓別的代碼來複用的，你可以把它當成一個公共方法。

@include 使用混入

.text {
  @include important-text;
}

注意：Sass 的連接符號 - 與下劃線符號 _ 是相同的，也就是 @mixin important-text { } 與 @mixin important_text { } 是一樣的混入。

混入包含混入

@mixin special-text {
 @include important-text;
 @include important-color;
}

混入傳參數

混入可以接收參數。

@mixin bordered($color, $width) {
  border: $width solid $color;
}

.my-text {
  @include bordered(blue, 1px);  // 調用混入，並傳遞兩個參數，計算邊框
}

這樣一看不是更像方法了嗎

混入可變參數

有時並不能確定一個混入到底要傳入多少參數，可以使用...。

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

瀏覽器前綴使用混入

瀏覽器前綴使用混入也是非常方便的

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

像類似的瀏覽器前綴簡直是必需品！

@extend 與繼承

在HTML 中我們一個標籤是不是這樣寫的 class="button-basic button-report"，有的可能有很多個，那就更長了。可以利用@extend 讓代碼得到複用。

語法

@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。

使用環境

如果一個樣式與另外一個樣式幾乎相同，只有少量的區別，則使用 @extend 。

示例

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

代碼解析

像.button-report需要用到.button-basic的基本屬性，就可以直接使用@extend .button-basic來獲取，這樣代碼的複用性就有了比較大的提高，而且結構性也會越來愈好，隔壁好朋友HTML也不用天天喫“烤串”了哈😂。

寫在最後的話

首先希望我的CSS寫的越來越好，其次，希望看到的pym也和我一樣，CSS寫的越來越好。畢竟Sass可是“軒轅劍”（Less出雙倍嗎？）

感謝

萬能的網絡

以及勤勞的自己，個人博客，GitHub測試，GitHub

公衆號-歸子莫，小程序-小歸博客

【Sass/SCSS】預加載器中的“軒轅劍”