當(dāng)談及設(shè)置網(wǎng)頁樣式的時(shí)候，我們可以選擇在項(xiàng)目中使用純 CSS 或是 SCSS（除了其它處理器之外）。SCSS 是 CSS 的超集。大多數(shù)的開發(fā)者都認(rèn)為，受益于高級(jí)的功能和清晰的語法，SCSS 使用起來比 CSS 更加方便。
在這篇文章中我想要帶著大家一起探索 SCSS 的功能以及 CSS 這些年來在功能上的提升。此外，我還會(huì)評(píng)估是否可以在實(shí)際項(xiàng)目中用 CSS 替代 SCSS。
CSS 當(dāng)前的功能
CSS 自誕生以來已經(jīng)取得了很大的進(jìn)展。近些年來 CSS 的發(fā)展也降低了在動(dòng)畫領(lǐng)域使用 JavaScript 的必要性?，F(xiàn)代瀏覽器甚至使用了 GPU 去提升這些 CSS 動(dòng)畫的性能。我們現(xiàn)在甚至只需要稍微學(xué)習(xí)一下，就可以使用 CSS 構(gòu)建復(fù)雜的響應(yīng)式網(wǎng)格布局。
如今 CSS 有了許多新的功能，但本文只會(huì)重點(diǎn)提及一些在現(xiàn)代 Web 應(yīng)用中常用的新功能。
- 在任何 Web 應(yīng)用的構(gòu)建中，最主要的一部分就是頁面的布局。我們當(dāng)中的大多數(shù)人這些年都依賴于諸如 Bootstrap 這樣的 CSS 框架，但 CSS 如今已經(jīng)提供了 Grid（網(wǎng)格）、Subgrid（子網(wǎng)格）、Flexbox（彈性盒）等新功能去原生地構(gòu)建布局。雖說 Flexbox 在開發(fā)者當(dāng)中廣受歡迎，但 Grid 布局也正迎頭趕上。
- 靈活的文字排版
- Transition 和 Transform 的強(qiáng)大能力讓我們不再需要使用 JavaScript 去制作動(dòng)畫
- 自定義屬性或變量
SCSS 的功能
SCSS 支持使用變量 —— 避免冗雜的代碼
我們其實(shí)可以在我們的樣式表中重用一堆的顏色 color 或其他元素定義（例如字體 font ）。為了做到在統(tǒng)一的一個(gè)地方聲明這些可重用的東西，SCSS 為我們提供了變量功能，讓我們能夠用一個(gè)變量名表示某個(gè)顏色，并在項(xiàng)目的其它地方使用該變量名，而不是重寫一遍顏色值。
例如下面這個(gè)例子：
$black: #000000;
$primary-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;
body {
color: $black;
font-family: $primary-font;
padding: #{$unit * 2};
}
CSS 也支持變量和自定義屬性，以下就是 CSS 中的自定義屬性：
--black: #000000;
--width: 800px;
--primaryFont: 'Ubuntu', 'Helvetica', sans-serif;
body {
width: var(--width);
color: var(--black);
font-family: var(--primaryFont);
}
但是在運(yùn)行時(shí) CSS 自定義屬性比 SCSS 變量更耗時(shí)。
這是因?yàn)闉g覽器會(huì)在運(yùn)行時(shí)去處理這些屬性。而 SCSS 則相反，它在預(yù)處理階段會(huì)被轉(zhuǎn)化為 CSS，并去處理變量。因此，SCSS 中變量的使用和代碼的重用相比 CSS 而言有著更好的性能。
SCSS 允許嵌套的語法 —— 更簡(jiǎn)潔的源代碼
假如有下面這樣的 CSS 代碼塊：
.header {
padding: 1rem;
border-bottom: 1px solid grey;
}
.header .nav {
list-style: none;
}
.header .nav li {
display: inline-flex;
}
.header .nav li a {
display: flex;
padding: 0.5rem;
color: red;
}
上述的代碼看起來很混亂，為了給子元素添加樣式，不得不重復(fù)聲明同一個(gè)父元素。
但如果使用 SCSS 的嵌套語法，我們可以編寫更簡(jiǎn)潔的代碼。上述的代碼如果用 SCSS 編寫，是這樣的：
.header {
padding: 1rem;
border-bottom: 1px solid grey;
.nav {
list-style: none;
li {
display: inline-flex;
a {
display: flex;
padding: 0.5rem;
color: red;
}
}
}
}
因此，與傳統(tǒng)的 CSS 相比，使用 SCSS 設(shè)計(jì)組件似乎更加優(yōu)雅而簡(jiǎn)潔。
@extend 功能 —— 避免重復(fù)同樣的樣式！
在 SCSS 中，我們可以使用 @extend 在不同的選擇器中共享相同的屬性。帶有占位符的 @extend 的使用方法如下所示：
%unstyled-list {
list-style: none;
margin: 0;
padding: 0;
}
%unstyled-list 是一個(gè)可以避免重復(fù)編寫代碼的語法糖，我們可以在不同的地方使用這個(gè)列表樣式模版，例如說：
.search-results {
@extend %unstyled-list;
}
.advertisements {
@extend %unstyled-list;
}
.dashboard {
@extend %unstyled-list;
}
同樣，我們可以在所有引入了這個(gè)定義的樣式表中重用它。
SCSS 中還有很多例如 函數(shù) 、 混入 、 循環(huán) 的功能，能讓我們的前端開發(fā)更加高效。
我應(yīng)該從 SCSS 切換到 CSS 嗎？
在上文中我們探索了 CSS 現(xiàn)有提供的功能以及 SCSS 的功能。但是，如果將 CSS 與 SCSS 進(jìn)行比較，我們會(huì)發(fā)現(xiàn)還有一些必要的功能無法在 CSS 中使用。
- 隨著 Web 應(yīng)用的不斷發(fā)展，樣式表會(huì)變得越發(fā)復(fù)雜和龐大。CSS 的嵌套功能將大幅度地提高代碼的可讀性，讓我們?cè)陂_發(fā)此類項(xiàng)目的時(shí)候得心應(yīng)手。但是，截止撰寫本文的時(shí)間，CSS 尚未支持該功能。
- CSS 無法處理流控制規(guī)則。 SCSS 內(nèi)置提供了諸如
@if 、 @else 、 @each 、 for 和 @while 的流控制規(guī)則。作為程序員，我發(fā)現(xiàn)這個(gè)功能對(duì)于定義樣式來說是非常有用的。這也讓我們可以編寫更少更簡(jiǎn)潔的代碼。
- 此外，SCSS 還支持?jǐn)?shù)字運(yùn)算符的標(biāo)準(zhǔn)集，而在 CSS 中我們必須使用
calc() 函數(shù)才能完成數(shù)值運(yùn)算。SCSS 的數(shù)值運(yùn)算還能在其兼容的單位之間進(jìn)行自動(dòng)轉(zhuǎn)換。
但是, calc() 這個(gè) CSS 函數(shù)幾乎沒有限制，例如除法中除數(shù)必須是數(shù)字，或是對(duì)于乘法運(yùn)算至少有一個(gè)參數(shù)是數(shù)字。
- 另一個(gè)重要方面是樣式重用，這是 SCSS 的”殺手锏“。在這個(gè)方面，SCSS 提供了許多功能，例如內(nèi)置模塊、映射、循環(huán)和變量。
因此我認(rèn)為，即使 CSS 已經(jīng)誕生了很多新功能，SCSS 仍然是更好的選擇。你可以在下面的評(píng)論區(qū)中談?wù)勀愕南敕ā?/p>
到此這篇關(guān)于CSS3 真的會(huì)替代 SCSS 嗎的文章就介紹到這了,更多相關(guān)CSS3 會(huì)替代 SCSS 嗎內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
