SASS 完全指南

Sass 是一個 CSS 預處理器，完全相容所有版本的 CSS。實際上，Sass 並沒有真正為 CSS 語言添加任何新功能，只是在許多情況下可以可以幫助我們減少 CSS 重復的程式碼，節省開發時間。下面就來看看 Sass 中常用的功能吧！

1. 註釋

在 Sass 中支持兩種型別的註釋：

// 註釋一
/* 註釋二 */


需要註意，當 Sass 編譯成CSS時，第一種註釋不會編譯到CSS中（只在Sass檔中可見），第二種註釋會編譯到CSS中。

2. 巢狀

巢狀的寫法是Sass的一大特點，透過巢狀這些程式碼，可以得到類似HTML結構的CSS程式碼，使程式碼更具可讀性。

nav {
background : #C39BD3;
padding : 10px;
height: 50px;
ul {
display: flex;
list- style : none;
justify-content: flex-end;
li {
color: white;
margin-right: 10px;
} 
}
}


那為什麽要使用巢狀呢？在CSS中，如果想為其父元素的繼承元素定義樣式，就必須每次都選擇父元素：

html, body {
height: 100%;
}
html#root, body#root {
height: 100%;
}
html.div-with-button, body.div-with-button {
background-color: black;
}
html.div-with-buttonbutton, body.div-with-buttonbutton {
background-color: #e4c681;
}
html.div-with-buttonbutton:hover, body.div-with-buttonbutton:hover {
background-color: #ffe082;
}




在Sass中就可以這樣寫，這樣寫就會使程式碼更加清晰、條理和簡潔：

html, body {
height: 100%;
#root {
height: 100%;
}
.div-with-button {
background-color: black;
button {
background-color: #e4c681;
&:hover {
background-color: #ffe082;
}
}
}
}




註意，在編寫Sass時，要巢狀巢狀太深，盡量不要超過三層，超過之後就會導致程式碼難以維護，並且在編譯為CSS時就會出現不必要的選擇器，就會導致CSS檔變大。

我們還可以在巢狀中使用 & ，比如滑鼠在按鈕上懸浮時，改變顏色。在CSS中是這樣的：

button {
background-color: #535353;
color: #000;
}
button:hover {
background-color: #000;
color: #fff;
}


在Sass中就可以這麽寫：

button {
background-color: #535353;
color: #000;
&:hover {
background-color: #000;
color: #fff;
}
}


通常，& 總是指向它上面的元素，可以用於偽類和偽元素：

.box {
&:focus{} 
&:hover{}
&:active{}
&:first-child{} 
&:nth-child(2){}
&::after{} 
&::before{} 
}


編譯後的CSS程式碼如下：

.box:focus{} 
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{}
.box::before{}


此外，如果類以相同的詞開頭（比如 box-yellow 和 box-red ），就可以巢狀它們：

.box {
&-yellow {
background: #ff6347;
}
&-red {
background: #ffd700;
}
&-green {
background: #9acd32;
}
}


編譯成CSS就是這樣的：

.box-yellow {
background: #ff6347;
}
.box-red {
background: #ffd700;
}
.box-green {
background: #9acd32;
}


Sass還支持使用 : 來巢狀內容：

add-icon {
background : {
image: url("./assets/arrow-right-solid.svg");
position: center center;
repeat: no-repeat;
size: 14px14px;
}
}


上面的程式碼編譯為如下CSS：

.add-icon {
background-image: url("./assets/arrow-right-solid.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 14px14px;
}


3. 變量

變量是用來儲存數據的，在Sass中，我們可以將任何有效的CSS值保存在變量中。變量使用 $ 符號定義：

$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;
$font-p: 13px;
$font-h1: 28px;
$base-font: 'NotoSansKR', sans-serif;


變量的使用：

body {
background-color : $bg-color;
font-size : $font-p;
font-family : $base-font;
}
h1 {
font-size: $font-h1;
color: $black;
}
p {
font-size: $font-p;
color: $black;
}
a {
color: $link-color;
}



當Sass編譯成CSS時，所有的變量都會被替換為定義的變量值。變量可以減少重復、進行復雜的數學運算等。

需要註意，CSS變量是有範圍的，位於頂層的變量都是全域變量，在塊中定義的變量都是局部變量。全域變量可以在任何地方使用，局部變量只能在變量定義的塊中使用。

$my-global-variable: "global";
div {
$my-local-variables: "local";
}

變量值是可以覆蓋的：

$color: #fefefe;
.content {
background-color: $color;
}
$color: #939393;
.footer {
background-color: $color;
}

在上面的程式碼中， content 的背景顏色是 #fefefe ，而 footer 的背景顏色是 #939393 。要想改變全域變量，就需要添加 !global 修飾詞：

$color: #111;
.content {
$color: #222;
background-color: $color;
}
.footer {
$color: #333 !global;
}


除此之外，Sass變量是可以指定預設值的：

$message-color: blue !default;
.message {
color: $message-color;
}

編譯成的CSS程式碼如下：

.message {
color: blue;
}


我們可以在 @import 之前覆蓋模組預設值：

$message-color: black;
@import'my-module';
.message {
color: $message-color;
}

編譯成的CSS程式碼如下：

p.message {
color: black;
}


也就是說，帶有 !default 的變量只有在沒有值的情況下才會生效。

4. Mixins 和 Include

mixin 是一組可以重用的 CSS 聲明，語法類似於JavaScript中的函式，使用 @mixin 指令來代替 function 關鍵字。呼叫 mixin 是透過 @include 語句完成的。

以下是用 mixins 使元素水平垂直居中的方法：

@mixin absolute-center() {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.element {
@include absolute-center();
}

當然，mixin也是支持傳遞參數的：

@mixin square($size) {
width:$size;
height:$size;
}
div {
@include square(60px);
background-color:#000;
}


參數可以是可選的，可選參數的定義和Sass變量的定義形式是一樣的：

@mixin square($width:50px) {
width:$size;
height:$size;
}


我們還可以將 CSS 規則傳遞給 mixins。這些規則可以在使用 @content 的 mixin 中使用。

@mixin hover-not-disabled {
&:not([disabled]):hover {
@content;
}
}
.button {
border: 1px solid black;
@include hover-not-disabled {
border-color: blue;
}
}


這樣 mixin 中的 @content 在編譯後就會變成 border-color: blue; 這樣寫有助於減少& :not([disabled]):hover 部份的重復。

5. @import 和 @use

在CSS中我們通常會建立多個CSS檔並在需要時引入：

<linkrel=" stylesheet" href="/path/to/css/1"></link>
<linkrel=" stylesheet" href="/path/to/css/2"></link> 
<linkrel=" stylesheet" href="/path/to/css/3"></link> 


這樣做會使瀏覽器發出多個HTTP請求，從而在一定程度上降低套用的速度。而Sass會在程式碼發動到瀏覽器之前進行程式碼組合，這樣只需要請求一個CSS檔。

下面來看看如何使用 @import 將檔分塊並匯入到一個父檔中：

body {
padding:0;
margin:0;
}
body, html {
width:100%;
min-height:100%;
}

@import'normalize';
content {
:660px;
}

假設 normalize.scss 和 styles.scss 都在同一個資料夾中，可以將一個匯入另一個，如上所示。在使用 @import 時，所有變量、mixin 等都可以全域存取，因為一切都是全域的，所以庫必須為其所有成員添加字首以避免命名沖突。因此不建議使用 @import。

可以使用 @use 來代替，它的基本用法與@import 相同：

@use'normalize';
content {
:660px;
}

使用 @use 匯入的檔稱為模組。要使用這些模組的 mixin 或變量，必須使用名稱空間來呼叫它們。預設情況下，名稱空間是檔名（不帶副檔名）。

$accent-color: #535353;
@mixin dark-background {
background-color:#000;
color:#fff;
}


@use'src/colors';
body {
color: colors.$accent-color;
}
.dark-region {
@include colors.dark-background;
}


還可以使用 as 來使用自訂名稱空間：

@use'src/colors' as c;
body {
color: c.$accent-color;
}


當 _ 被添加到 SCSS 檔的檔名前時，解析器知道它是一個部份檔並且它僅用於匯入。匯入時， _ 部份是可選的。註意，這裏使用 src/colors 來匯入 src/_colors.scss 。

6. 算術運算子

在CSS中可以使用calc()進行數學計算，Sass 支持直接使用+、-、/、*、% 操作符對值和變量進行計算：

$content-width: 600px;
content {
width:$content-width;
}
.inner-content {
width: $content-width - 60px; 
}
.outer-content {
width: $content-width + 60px;
}


7. 流程控制

在 Sass 中有四種型別的流程控制規則： @if / @else 、 @each 、 @for 和 @while 。其中 @if 和 @else 類似於 JavaScript 中的 if 和 else。

@mixin theme($is-dark: false) {
@if $is-dark {
}
@else {
}
}


@each 類似於 JavaScript 中的 for of ：

$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}


註意：#{$size} 表示法用於使用變量制作動態內容名稱和選擇器，這稱為插值。

@for 類似於 JavaScript 中的 for 迴圈：

@for $i from 1 through 4 {
.bubble-#{$i} {
transition-delay: .3 * $i;
}
}


@while（不常用）類似於 JavaScript 中的 while 迴圈。

8. 擴充套件/繼承

有時需要編寫一個僅用於擴充套件的樣式規則。在這種情況下，可以使用占位符選擇器，它看起來像以 % 而不是 . 開頭的類選擇器。

%flex {
display: flex;
}
.some- class {
height: 50%;
background-color: black;
}
%flex_with_color {
@extend %flex;
@extend .some- class;
}
%button_ styles {
height: 50px;
width: 200px;
}
div {
@extend %flex_with_color;
button {
@extend %button_ styles;
color: #424242;
background-color: #d966fb;
}
}





上面的程式碼編譯成CSS之後將是這樣的：

div {
display: flex;
}
.some- class, div {
height: 50%;
background-color: black;
}
divbutton {
height: 50px;
width: 200px;
}
divbutton {
color: #424242;
background-color: #d966fb;
}



9. 媒體查詢

在Sass中可以這樣來使用媒體查詢：

body {
article {
p {
font-size: 100%;
color: black;
padding: 10px;
@media (: 768px) {
font-size: 150%;
}
}
}
}

編譯成的CSS程式碼如下：

bodyarticlep {
font-size: 100%;
color: black;
padding: 10px;
}
@media (768px) {
bodyarticlep {
font-size: 150%;
}
}

媒體查詢是支持巢狀的，並將所有適用的查詢與 and 運算子結合起來：

p {
@media (: 768px) {
font-size: 150%; 
@media (orientation: landscape) {
line-height: 75%; 
}
}
}


編譯成的CSS程式碼如下：

@media (768px) {
p {
font-size: 150%;
}
}
@media (768px) and (orientation: landscape) {
p {
line-height: 75%;
}
}