一、簡介
前言
因?yàn)?CSS 本身語法不夠強(qiáng)大，導(dǎo)致重復(fù)編寫一些代碼，無法實(shí)現(xiàn)復(fù)用，而且在代碼也不方便維護(hù)。
所以 Sass 引入可以合理的樣式復(fù)用機(jī)制，增加了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等等特性。
Sass (英文全稱：Syntactically Awesome Stylesheets) 是一個最初由 Hampton Catlin 設(shè)計并由 Natalie Weizenbaum 開發(fā)的 層疊樣式表語言。
- Sass 是一個 CSS 預(yù)處理器。
- Sass 是 CSS 擴(kuò)展語言，是CSS的超集，可以幫助我們減少 CSS 重復(fù)的代碼，節(jié)省開發(fā)時間。
- Sass 完全兼容所有版本的 CSS。
- Sass 擴(kuò)展了 CSS3，增加了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等等特性。
- Sass 生成良好格式化的 CSS 代碼，易于組織和維護(hù)。
- Sass 文件后綴為
.scss。
官網(wǎng)：https://sass-lang.com
中文網(wǎng)：https://www.sass.hk
?
Sass預(yù)處理器
瀏覽器并不支持 Sass 代碼。因此，需要使用一個 Sass 預(yù)處理器將 Sass 代碼轉(zhuǎn)換為 CSS 代碼?？梢匀ス倬W(wǎng)查看安裝教程。
命令
sass xxx.scss xxx.css
從終端運(yùn)行thesass命令，可以將Sass編譯為CSS。sass --watch input.scss output.css
使用--watch標(biāo)志觀看單個文件或目錄的，可以在每次保存Sass時重新編譯CSS。sass --watch app/sass:public/stylesheets
可以使用文件夾路徑作為輸入和輸出，并用冒號將它們分開，來觀察和輸出到目錄。
可以使用
?
二、應(yīng)用
.html文件當(dāng)中是不能直接使用Sass, 需要.scss轉(zhuǎn)譯成.css，并引入生成的.css文件進(jìn)行使用，項(xiàng)目結(jié)束后根據(jù)需要是否刪除 .scss 文件和 .map文件。
變量
可以用來存儲需要重復(fù)使用的CSS值等內(nèi)容，例如：顏色、字體堆棧等等。
使用 $符號進(jìn)行聲明。
示例：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
?
嵌套
Sass將允許您以遵循HTML相同視覺層次結(jié)構(gòu)的方式嵌套CSS選擇器。使CSS具有更佳的可讀性。
示例：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
?
部分
部分是帶有前導(dǎo)下劃線的Sass文件。你可以把它命名為_partial.scss。
讓Sass預(yù)處理器知道該文件只是一個部分文件，它不應(yīng)該生成成CSS文件。Sass部分與@use規(guī)則一起使用。
?
模塊
可以使用@use規(guī)則 拆分 .scss，此規(guī)則將另一個Sass文件加載為模塊。
####### 示例：
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
?
混合
Sacc允許制作一組CSS聲明，并在整個站點(diǎn)中重復(fù)使用。需要使用@mixin、@include規(guī)則。
示例：
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
示例解析：
要創(chuàng)建混和，先使用@mixin指令進(jìn)行命名，示例命名了混合theme，且在括號內(nèi)使用變量$theme，這樣可以傳遞任何的主題。創(chuàng)建@mixin后，可以將其用作以@include開頭的CSS聲明，后跟@mixin的名稱。
?
繼承/擴(kuò)展
使用@extend，可以將一組CSS屬性從一個選擇器共享到另一個選擇器。
作用：
- 只有在擴(kuò)展時才會打印，并且可以幫助保持編譯的CSS整潔。
- 有助于避免在HTML元素上寫入多個類名。
示例：
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
.css
/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
引申：
這個示例也可以通過混合的規(guī)則實(shí)現(xiàn)，不過在生成.css的文件里面，代碼的簡潔性上不如擴(kuò)展。
?
運(yùn)算符
Sass有少數(shù)標(biāo)準(zhǔn)數(shù)學(xué)運(yùn)算符，如+、-、*、math.div()、%。
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}
