一、簡介
前言
因為 CSS 本身語法不夠強大，導致重復編寫一些代碼，無法實現復用，而且在代碼也不方便維護。
所以 Sass 引入可以合理的樣式復用機制，增加了規則、變量、混入、選擇器、繼承、內置函數等等特性。
Sass (英文全稱：Syntactically Awesome Stylesheets) 是一個最初由 Hampton Catlin 設計并由 Natalie Weizenbaum 開發的 層疊樣式表語言。
- Sass 是一個 CSS 預處理器。
- Sass 是 CSS 擴展語言，是CSS的超集，可以幫助我們減少 CSS 重復的代碼，節省開發時間。
- Sass 完全兼容所有版本的 CSS。
- Sass 擴展了 CSS3，增加了規則、變量、混入、選擇器、繼承、內置函數等等特性。
- Sass 生成良好格式化的 CSS 代碼，易于組織和維護。
- Sass 文件后綴為
.scss。
官網：https://sass-lang.com
中文網：https://www.sass.hk
?
Sass預處理器
瀏覽器并不支持 Sass 代碼。因此，需要使用一個 Sass 預處理器將 Sass 代碼轉換為 CSS 代碼。可以去官網查看安裝教程。
命令
sass xxx.scss xxx.css
從終端運行thesass命令，可以將Sass編譯為CSS。sass --watch input.scss output.css
使用--watch標志觀看單個文件或目錄的，可以在每次保存Sass時重新編譯CSS。sass --watch app/sass:public/stylesheets
可以使用文件夾路徑作為輸入和輸出，并用冒號將它們分開，來觀察和輸出到目錄。
可以使用
?
二、應用
.html文件當中是不能直接使用Sass, 需要.scss轉譯成.css，并引入生成的.css文件進行使用，項目結束后根據需要是否刪除 .scss 文件和 .map文件。
變量
可以用來存儲需要重復使用的CSS值等內容，例如：顏色、字體堆棧等等。
使用 $符號進行聲明。
示例：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
?
嵌套
Sass將允許您以遵循HTML相同視覺層次結構的方式嵌套CSS選擇器。使CSS具有更佳的可讀性。
示例：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
?
部分
部分是帶有前導下劃線的Sass文件。你可以把它命名為_partial.scss。
讓Sass預處理器知道該文件只是一個部分文件，它不應該生成成CSS文件。Sass部分與@use規則一起使用。
?
模塊
可以使用@use規則 拆分 .scss，此規則將另一個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聲明，并在整個站點中重復使用。需要使用@mixin、@include規則。
示例：
@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);
}
示例解析：
要創建混和，先使用@mixin指令進行命名，示例命名了混合theme，且在括號內使用變量$theme，這樣可以傳遞任何的主題。創建@mixin后，可以將其用作以@include開頭的CSS聲明，后跟@mixin的名稱。
?
繼承/擴展
使用@extend，可以將一組CSS屬性從一個選擇器共享到另一個選擇器。
作用：
- 只有在擴展時才會打印，并且可以幫助保持編譯的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;
}
引申：
這個示例也可以通過混合的規則實現，不過在生成.css的文件里面，代碼的簡潔性上不如擴展。
?
運算符
Sass有少數標準數學運算符，如+、-、*、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;
}
