當(dāng)談及設(shè)置網(wǎng)頁(yè)樣式的時(shí)候，我們可以選擇在項(xiàng)目中使用純 CSS 或是 SCSS（除了其它處理器之外）。SCSS 是 CSS 的超集。大多數(shù)的開(kāi)發(fā)者都認(rèn)為，受益于高級(jí)的功能和清晰的語(yǔ)法，SCSS 使用起來(lái)比 CSS 更加方便。

在這篇文章中我想要帶著大家一起探索 SCSS 的功能以及 CSS 這些年來(lái)在功能上的提升。此外，我還會(huì)評(píng)估是否可以在實(shí)際項(xiàng)目中用 CSS 替代 SCSS。

CSS 當(dāng)前的功能

CSS 自誕生以來(lái)已經(jīng)取得了很大的進(jìn)展。近些年來(lái) CSS 的發(fā)展也降低了在動(dòng)畫(huà)領(lǐng)域使用 JavaScript 的必要性?，F(xiàn)代瀏覽器甚至使用了 GPU 去提升這些 CSS 動(dòng)畫(huà)的性能。我們現(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)建中，最主要的一部分就是頁(yè)面的布局。我們當(dāng)中的大多數(shù)人這些年都依賴于諸如 Bootstrap 這樣的 CSS 框架，但 CSS 如今已經(jīng)提供了 Grid（網(wǎng)格）、Subgrid（子網(wǎng)格）、Flexbox（彈性盒）等新功能去原生地構(gòu)建布局。雖說(shuō) Flexbox 在開(kāi)發(fā)者當(dāng)中廣受歡迎，但 Grid 布局也正迎頭趕上。
• 靈活的文字排版
• Transition 和 Transform 的強(qiáng)大能力讓我們不再需要使用 JavaScript 去制作動(dòng)畫(huà)
• 自定義屬性或變量

 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 允許嵌套的語(yǔ)法 —— 更簡(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;
}

上述的代碼看起來(lái)很混亂，為了給子元素添加樣式，不得不重復(fù)聲明同一個(gè)父元素。

但如果使用 SCSS 的嵌套語(yǔ)法，我們可以編寫更簡(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ù)編寫代碼的語(yǔ)法糖，我們可以在不同的地方使用這個(gè)列表樣式模版，例如說(shuō)：

.search-results {
    @extend %unstyled-list;
}

.advertisements {
    @extend %unstyled-list;
}

.dashboard {
    @extend %unstyled-list;
}

同樣，我們可以在所有引入了這個(gè)定義的樣式表中重用它。

SCSS 中還有很多例如 函數(shù) 、 混入 、 循環(huán) 的功能，能讓我們的前端開(kāi)發(fā)更加高效。

我應(yīng)該從 SCSS 切換到 CSS 嗎？

在上文中我們探索了 CSS 現(xiàn)有提供的功能以及 SCSS 的功能。但是，如果將 CSS 與 SCSS 進(jìn)行比較，我們會(huì)發(fā)現(xiàn)還有一些必要的功能無(wú)法在 CSS 中使用。

• 隨著 Web 應(yīng)用的不斷發(fā)展，樣式表會(huì)變得越發(fā)復(fù)雜和龐大。CSS 的嵌套功能將大幅度地提高代碼的可讀性，讓我們?cè)陂_(kāi)發(fā)此類項(xiàng)目的時(shí)候得心應(yīng)手。但是，截止撰寫本文的時(shí)間，CSS 尚未支持該功能。
• CSS 無(wú)法處理流控制規(guī)則。 SCSS 內(nèi)置提供了諸如 @if 、 @else 、 @each 、 for 和 @while 的流控制規(guī)則。作為程序員，我發(fā)現(xiàn)這個(gè)功能對(duì)于定義樣式來(lái)說(shuō)是非常有用的。這也讓我們可以編寫更少更簡(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ù)幾乎沒(méi)有限制，例如除法中除數(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)文章，希望大家以后多多支持腳本之家！

最新評(píng)論