Sass 是一個(gè) CSS 預(yù)處理器，完全兼容所有版本的 CSS。實(shí)際上，Sass 并沒(méi)有真正為 CSS 語(yǔ)言添加任何新功能。只是在許多情況下可以可以幫助我們減少 CSS 重復(fù)的代碼，節(jié)省開(kāi)發(fā)時(shí)間。下面就來(lái)看看 Sass 中常用的功能吧！
1. 注釋
在 Sass 中支持兩種類(lèi)型的注釋?zhuān)?/p>
需要注意，當(dāng) Sass 編譯成CSS時(shí)，第一種注釋不會(huì)編譯到CSS中（只在Sass文件中可見(jiàn)），第二種注釋會(huì)編譯到CSS中。
2. 嵌套
嵌套的寫(xiě)法是Sass的一大特點(diǎn)，通過(guò)嵌套這些代碼，可以得到類(lèi)似HTML結(jié)構(gòu)的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-button button, body .div-with-button button {
background-color: #e4c681;
}
html .div-with-button button:hover, body .div-with-button button:hover {
background-color: #ffe082;
}在Sass中就可以這樣寫(xiě)，這樣寫(xiě)就會(huì)使代碼更加清晰、條理和簡(jiǎn)潔：
html, body {
height: 100%;
#root {
height: 100%;
}
.div-with-button {
background-color: black;
button {
background-color: #e4c681;
&:hover {
background-color: #ffe082;
}
}
}
}注意，在編寫(xiě)Sass時(shí)，要嵌套嵌套太深，盡量不要超過(guò)三層，超過(guò)之后就會(huì)導(dǎo)致代碼難以維護(hù)，并且在編譯為CSS時(shí)就會(huì)出現(xiàn)不必要的選擇器，就會(huì)導(dǎo)致CSS文件變大。
我們還可以在嵌套中使用 &，比如鼠標(biāo)在按鈕上懸浮時(shí)，改變顏色。在CSS中是這樣的：
button {
background-color: #535353;
color: #000;
}
button:hover {
background-color: #000;
color: #fff;
}在Sass中就可以這么寫(xiě)：
button {
background-color: #535353;
color: #000;
&:hover {
background-color: #000;
color: #fff;
}
}通常，& 總是指向它上面的元素，可以用于偽類(lèi)和偽元素：
.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{}此外，如果類(lèi)以相同的詞開(kāi)頭（比如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還支持使用:來(lái)嵌套屬性：
add-icon {
background : {
image: url("./assets/arrow-right-solid.svg");
position: center center;
repeat: no-repeat;
size: 14px 14px;
}
}上面的代碼編譯為如下CSS：
.add-icon {
background-image: url("./assets/arrow-right-solid.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 14px 14px;
}3. 變量
變量是用來(lái)儲(chǔ)存數(shù)據(jù)的，在Sass中，我們可以將任何有效的CSS值保存在變量中。變量使用$符號(hào)定義：
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;
$font-p: 13px;
$font-h1: 28px;
$base-font: 'Noto Sans KR', 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;
}當(dāng)Sass編譯成CSS時(shí)，所有的變量都會(huì)被替換為定義的變量值。變量可以減少重復(fù)、進(jìn)行復(fù)雜的數(shù)學(xué)運(yùn)算等。
需要注意，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。要想改變?nèi)肿兞?，就需要添?global修飾符：
$color: #111;
.content {
$color: #222;
background-color: $color;
}
.footer {
$color: #333 !global;
}
除此之外，Sass變量是可以指定默認(rèn)值的：
$message-color: blue !default;
.message {
color: $message-color;
}
編譯成的CSS代碼如下：
p.message {
color: blue;
}我們可以在 @import 之前覆蓋模塊默認(rèn)值：
$message-color: black;
@import 'my-module';
.message {
color: $message-color;
}
編譯成的CSS代碼如下：
p.message {
color: black;
}也就是說(shuō)，帶有 !default 的變量只有在沒(méi)有值的情況下才會(huì)生效。
4. Mixins 和 Include
mixin 是一組可以重用的 CSS 聲明，語(yǔ)法類(lèi)似于JavaScript中的函數(shù)，使用 @mixin 指令來(lái)代替 function 關(guān)鍵字。調(diào)用 mixin 是通過(guò) @include 語(yǔ)句完成的。
以下是用 mixins 使元素水平垂直居中的方法：
@mixin absolute-center() {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.element {
@include absolute-center();
}當(dāng)然，mixin也是支持傳遞參數(shù)的：
@mixin square($size) {
width:$size;
height:$size;
}
div {
@include square(60px);
background-color:#000;
}參數(shù)可以是可選的，可選參數(shù)的定義和Sass變量的定義形式是一樣的：
@mixin square($width: 50px) {
width:$size;
height:$size;
}我們還可以將 CSS 規(guī)則傳遞給 mixins。這些規(guī)則可以在使用 @content 的 mixin 中使用。
@mixin hover-not-disabled {
&:not([disabled]):hover {
@content;
}
}
.button {
border: 1px solid black;
@include hover-not-disabled {
border-color: blue;
}
}這樣mixin中的@content在編譯后就會(huì)變成border-color: blue;這樣寫(xiě)有助于減少&:not([disabled]):hover部分的重復(fù)。
5. @import 和 @use
在CSS中我們通常會(huì)創(chuàng)建多個(gè)CSS文件并在需要時(shí)引入：
<link rel="stylesheet" href="/path/to/css/1"></link>
<link rel="stylesheet" href="/path/to/css/2"></link>
<link rel="stylesheet" href="/path/to/css/3"></link>
這樣做會(huì)使瀏覽器發(fā)出多個(gè)HTTP請(qǐng)求，從而在一定程度上降低應(yīng)用的速度。而Sass會(huì)在代碼發(fā)動(dòng)到瀏覽器之前進(jìn)行代碼組合，這樣只需要請(qǐng)求一個(gè)CSS文件。
下面來(lái)看看如何使用 @import 將文件分塊并導(dǎo)入到一個(gè)父文件中：
body {
padding:0;
margin:0;
}
body, html {
width:100%;
min-height:100%;
}@import 'normalize';
content {
max-width:660px;
}
假設(shè) normalize.scss 和 styles.scss 都在同一個(gè)文件夾中，可以將一個(gè)導(dǎo)入另一個(gè)，如上所示。在使用@import時(shí)，所有變量、mixin 等都可以全局訪問(wèn)，因?yàn)橐磺卸际侨值?，所以?kù)必須為其所有成員添加前綴以避免命名沖突。因此不建議使用 @import。
可以使用 @use 來(lái)代替，它的基本用法與@import 相同：
@use 'normalize';
content {
max-width:660px;
}
使用 @use 導(dǎo)入的文件稱(chēng)為模塊。要使用這些模塊的 mixin 或變量，必須使用命名空間來(lái)調(diào)用它們。默認(rèn)情況下，命名空間是文件名（不帶擴(kuò)展名）。
$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 來(lái)使用自定義命名空間：
@use 'src/colors' as c;
body {
color: c.$accent-color;
}
當(dāng) _ 被添加到 SCSS 文件的文件名前時(shí)，解析器知道它是一個(gè)部分文件并且它僅用于導(dǎo)入。導(dǎo)入時(shí)，_ 部分是可選的。注意，這里使用 src/colors 來(lái)導(dǎo)入 src/_colors.scss。
6. 算術(shù)運(yùn)算符
在CSS中可以使用calc()進(jìn)行數(shù)學(xué)計(jì)算，Sass 支持直接使用+、-、/、*、% 操作符對(duì)值和變量進(jìn)行計(jì)算：
$content-width: 600px;
content {
width:$content-width;
}
.inner-content {
width: $content-width - 60px;
}
.outer-content {
width: $content-width + 60px;
}
7. 流程控制1111111111111111111111
在 Sass 中有四種類(lèi)型的流程控制規(guī)則：@if /@else、@each、@for 和@while。其中 @if 和 @else 類(lèi)似于 JavaScript 中的 if 和 else。
@mixin theme($is-dark: false) {
@if $is-dark {
}
@else {
}
}@each 類(lèi)似于 JavaScript 中的 for of：
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}
注意：#{$size} 表示法用于使用變量制作動(dòng)態(tài)屬性名稱(chēng)和選擇器，這稱(chēng)為插值。
@for 類(lèi)似于 JavaScript 中的 for 循環(huán)：
@for $i from 1 through 4 {
.bubble-#{$i} {
transition-delay: .3 * $i;
}
}@while（不常用）類(lèi)似于 JavaScript 中的 while 循環(huán)。
8. 擴(kuò)展/繼承
有時(shí)需要編寫(xiě)一個(gè)僅用于擴(kuò)展的樣式規(guī)則。在這種情況下，可以使用占位符選擇器，它看起來(lái)像以 % 而不是 . 開(kāi)頭的類(lèi)選擇器。
%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;
}
div button {
height: 50px;
width: 200px;
}
div button {
color: #424242;
background-color: #d966fb;
}9. 媒體查詢(xún)
在Sass中可以這樣來(lái)使用媒體查詢(xún)：
body {
article {
p {
font-size: 100%;
color: black;
padding: 10px;
@media (max-width: 768px) {
font-size: 150%;
}
}
}
}編譯成的CSS代碼如下：
body article p {
font-size: 100%;
color: black;
padding: 10px;
}
@media (max-width: 768px) {
body article p {
font-size: 150%;
}
}媒體查詢(xún)是支持嵌套的，并將所有適用的查詢(xún)與 and 運(yùn)算符結(jié)合起來(lái)：
p {
@media (max-width: 768px) {
font-size: 150%;
@media (orientation: landscape) {
line-height: 75%;
}
}
}編譯成的CSS代碼如下：
@media (max-width: 768px) {
p {
font-size: 150%;
}
}
@media (max-width: 768px) and (orientation: landscape) {
p {
line-height: 75%;
}
}
