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

歸子莫發表於2021-11-18
CSS

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

部落格說明

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

說明

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

image-20211117192902380

官網地址：SASS中文網

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

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

image-20211117194148922

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

公眾號-歸子莫，小程式-小歸部落格

相關文章