說到css墨坚，相信大家都知道岖赋，css樣式是用來修飾網(wǎng)頁頁面結(jié)構(gòu)的。對于一名前端來說寫好css并不難鞭莽，但如何寫出優(yōu)雅可復(fù)用坊秸、易重構(gòu)的css代碼并不容易。
于是css預(yù)處理器便出現(xiàn)在大家的視線里澎怒，分別是 stylus褒搔、less、sass喷面。它們的出現(xiàn)讓編寫css更加像JavaScript一樣具有嚴(yán)謹性星瘾、編程性。由于我工作中常用scss(sass3版本后更偏向css的原生語法)乖酬，我會結(jié)合實際項目大體介紹sass的用法死相。在此對stylus、less就不做多敘述咬像。更多細節(jié)請訪問stylus官網(wǎng) 算撮、less官網(wǎng)
sass背景
Sass（Syntactically Awesome Style Sheets），套用sass官網(wǎng)的牛逼介紹：“sass是世界上最成熟县昂、最穩(wěn)定肮柜、最強大的專業(yè)級CSS擴展語言！”倒彰。是一個相對新的css預(yù)編譯框架审洞，為前端開發(fā)而生。
為什么使用Sass?
通過sass編寫css代碼，你可以減少冗余的css代碼芒澜，編寫更加語義化的css仰剿，它擴展了css的能力，增加變量痴晦、嵌套css規(guī)則南吮、混合器、繼承誊酌、函數(shù)等新特性部凑。Write less，Do more碧浊。何樂而不為呢涂邀？??
.sass vs .scss ?
早已Sass出現(xiàn)的時候，是沒有Scss的箱锐，其語法跟原生css不盡相同比勉。使用縮進代替括號，沒有分號瑞躺。有些開發(fā)者并不適應(yīng)這種寫法敷搪，于是在Sass發(fā)布的3.0版本后，將語法改成了.scss幢哨。Scss對應(yīng)css就像typescript是JavaScript的超集一樣的關(guān)系。
Sass安裝
關(guān)于Sass安裝網(wǎng)上有很多詳細教程嫂便，推薦幾篇典型的安裝教程文章捞镰。
Sass官網(wǎng)安裝教程
慕課網(wǎng)Sass安裝
Sass在node.js編譯環(huán)境的安裝
-
在 nodejs 的平臺下面，我們需要安裝
node-sass模塊毙替，通過這個模塊岸售，我們可以將 scss 文件轉(zhuǎn)換成 css 文件$ cnpm install node-sass --save 安裝完成以后，我們新建一個文件厂画，名為 index.scss 文件
-
使用 node-sass 的語法來編譯 index.scss,具體語法如下
node-sass --watch src/index.scss dist/index.css -
如果我們需要監(jiān)控一個文件夾下面所有的文件凸丸，則需要使用如下的語法格式
node-sass -w -r <源文件夾> -o <目標(biāo)文件夾> //它只會跟蹤同名文件，沒有則新建 -w, --watch Watch a directory or file //監(jiān)聽 -r, --recursive Recursively watch directories or files //遞歸地查看目錄或文件 -o, --output Output directory //輸出目錄 -
為了能夠方法的執(zhí)行我們的 node-sass 語法袱院，我們一般會把編譯命令寫在 package.json 的配置文件下面屎慢，如下：
{ "name": "sass-demo", "version": "1.0.0", "description": "sass練習(xí)", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "sass": "node-sass --watch ./src/index.scss ./src/index.css" }, "keywords": [], "author": "luckydong", "license": "ISC", "dependencies": { "node-sass": "^4.9.0" } }
1、 Sass變量
1.1 變量聲明與引用
sass變量聲明和css屬性聲明很像：
$theme-color: #fff;
這意味著變量$theme-color現(xiàn)在的值是#fff忽洛。
$theme-color: #fff;
div {
$height: 100px;
height: $height;
color: $theme-color;
}
//編譯后
div {
height: 100px;
color: #fff;
}
在這段代碼中腻惠，$theme-color這個變量定義在了規(guī)則塊外邊，所以在這個樣式表中都可以像 div規(guī)則塊那樣引用它欲虚。
1.2 默認變量
$defaultWidth: 100px; //全局變量
$defaultWidth: 200px !default;
.div1 {
$height: 50px; //定義變量 局部變量
width: $defaultWidth;
height: $height; //引用變量
}
.div2 {
width: $defaultWidth;
}
注意：在SCSS語法里面集灌，變量分為全局變量與局部變量，變量加上!default 以后就是默認變量
2复哆、 嵌套 CSS 規(guī)則
css中重復(fù)寫選擇器是非常繁瑣無趣的事欣喧。如果要寫一大串指向頁面中同一塊樣式時腌零，往往需要多次寫同一個ID或是同一個class類名:
#content article h1 {
color: #333;
}
#content article p {
margin-bottom: 1.4em;
}
#content aside {
background-color: #eee;
}
上面的 CSS 代碼經(jīng)過使用 SCSS 的語法以后就會變得非常簡單，如下所示
#content {
article {
h1 {
color: #333;
}
p {
margin-bottom: 1.4em;
}
}
aside {
background-color: #eee;
}
}
2.1 父選擇器的標(biāo)識符&
在 scss 中唆阿，有時候我們需要在子級當(dāng)中使用父級選擇器莱没，此時我們就需要使用&來選取父級選擇器
.div1 {
width: 100px;
height: 100px;
}
.div1 img {
width: 100%;
height: auto;
}
.div1:hover {
border: 1px solid black;
}
上面的 css 代碼經(jīng)過 scss 的處理以后，可以簡寫為如下
.div1 {
width: 100px;
height: 100px;
img {
width: 100%;
height: auto;
}
&:hover {
border: 1px solid black;
}
}
2.2 子級選擇器中的> ~與+
- '>'代表是的子級選擇器
- 空格代碼的是后代選擇器
- '+'代表的是相鄰兄弟選擇器
- ‘～’代表兄弟選擇器
以上的四種用法與 CSS 的選擇器保持一致
3酷鸦、 混合器
有時候我們在寫樣式的時候會發(fā)現(xiàn)饰躲，有些地方有樣式，其中有一些是相同的臼隔，這個時候嘹裂，我們會把這些樣式提取出來，然后再單獨導(dǎo)入進去摔握。
例如：假設(shè)我們需要寫一個 button寄狼，這個 button 的大小與邊框都一樣，唯獨里在的顏色中一樣的時候氨淌，我們可以 使用混合器做如下處理
@mixin btn {
width: 120px;
height: 35px;
border: 1px solid lightgray;
border-radius: 15px;
}
.btn-success {
@include btn;
background-color: green;
}
說明：在上面的代碼當(dāng)中泊愧，不難發(fā)現(xiàn)，我們使用了@mixin 來定義一個混合器盛正，在下面的樣式當(dāng)中删咱，我們使用了@include 導(dǎo)入混合器。這樣 .btn-success 的樣式就結(jié)合了之前定義的樣式了
3.1 混合器的中參數(shù)
SCSS中的混合器有點類似于js中的方法豪筝，定義一個混合器就相當(dāng)于定義了一個方法痰滋，而我們定義方法的時候可以定義參數(shù)，在調(diào)用方法的時候续崖，我們則可以使用這個參數(shù)敲街。同理，在 SCSS 當(dāng)中严望，定義混合器也可以使用參數(shù)多艇，代碼如下所示：
@mixin flex-box($direction) {
display: flex;
flex-direction: $direction;
}
.item1 {
@include flex-box(row);
justify-content: center;
align-items: center;
}
上面的代碼經(jīng)過 node-sass 編譯后，如下：
.item1 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
3.2 混合器參數(shù)的默認值
為了在@include混合器時不必傳入所有的參數(shù)像吻，給參數(shù)指定一個默認值峻黍，上面的 SCSS 中，如果希望flex布局中默認的主軸是 column萧豆，可以定義如下：
@mixin flex-box($direction: column) {
display: flex;
flex-direction: $direction;
}
.item1 {
@include flex-box;
justify-content: center;
align-items: center;
}
在上面的 SCSS 當(dāng)中奸披，我們在調(diào)用的時候沒有傳遞參數(shù)給混合器，而是使用了它的默認值
4涮雷、 選擇器繼承
使用sass的時候阵面，最后一個減少重復(fù)的主要特性就是選擇器繼承。
選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現(xiàn)样刷，如下代碼:
//通過選擇器繼承繼承樣式
.error {
border: 1px solid red;
background-color: #fdd;
}
.loading-error {
@extend .error;
border-width: 3px;
}
上面的@extend就相當(dāng)于繼承仑扑，后面的.error 則是繼承的選擇器，上面的 SCSS 經(jīng)過編譯后所呈現(xiàn)的代碼如下所示：
.error,
.loading-error {
border: 1px solid red;
background-color: #fdd;
}
.loading-error {
border-width: 3px;
}
說明：我們可以看到置鼻，繼承的選擇器镇饮，它在這里使用了分組選擇器來完了這個功能，這樣我們的.loading-error 的樣式則單獨的區(qū)分開箕母。
關(guān)于@extend有兩個要點你應(yīng)該知道储藐。
跟混合器相比，繼承生成的css代碼相對更少嘶是。因為繼承僅僅是重復(fù)選擇器钙勃，而不會重復(fù)屬性，所以使用繼承往往比混合器生成的css體積更小聂喇。如果你非常關(guān)心你站點的速度辖源，請牢記這一點。
繼承遵從css層疊的規(guī)則希太。當(dāng)兩個不同的css規(guī)則應(yīng)用到同一個html元素上時克饶，并且這兩個不同的css規(guī)則對同一屬性的修飾存在不同的值，css層疊規(guī)則會決定應(yīng)用哪個樣式誊辉。相當(dāng)直觀：通常權(quán)重更高的選擇器勝出矾湃，如果權(quán)重相同，定義在后邊的規(guī)則勝出芥映。
Sass 寫在最后
- 變量
- 嵌套 CSS 規(guī)則
- 混合器
- 繼承
以上的四種是 Sass 的核心內(nèi)容洲尊，也是最基礎(chǔ)內(nèi)容，通過了解學(xué)習(xí)后奈偏，我們可以快速的編寫頁面樣式，提高開發(fā)效率躯护，做到 CSS 代碼重復(fù)率低惊来，可復(fù)用性高。
下一篇帶來關(guān)于Sass的高級用法棺滞，敬請期待裁蚁！??
