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

在這篇文章中我想要帶著大家一起探索 SCSS 的功能以及 CSS 這些年來在功能上的提升。此外，我還會評估是否可以在實際項目中用 CSS 替代 SCSS。

CSS 當前的功能

CSS 自誕生以來已經(jīng)取得了很大的進展。近些年來 CSS 的發(fā)展也降低了在動畫領(lǐng)域使用 JavaScript 的必要性?，F(xiàn)代瀏覽器甚至使用了 GPU 去提升這些 CSS 動畫的性能。我們現(xiàn)在甚至只需要稍微學(xué)習(xí)一下，就可以使用 CSS 構(gòu)建復(fù)雜的響應(yīng)式網(wǎng)格布局。

如今 CSS 有了許多新的功能，但本文只會重點提及一些在現(xiàn)代 Web 應(yīng)用中常用的新功能。

• 在任何 Web 應(yīng)用的構(gòu)建中，最主要的一部分就是頁面的布局。我們當中的大多數(shù)人這些年都依賴于諸如 Bootstrap 這樣的 CSS 框架，但 CSS 如今已經(jīng)提供了 Grid（網(wǎng)格）、Subgrid（子網(wǎng)格）、Flexbox（彈性盒）等新功能去原生地構(gòu)建布局。雖說 Flexbox 在開發(fā)者當中廣受歡迎，但 Grid 布局也正迎頭趕上。
• 靈活的文字排版
• Transition 和 Transform 的強大能力讓我們不再需要使用 JavaScript 去制作動畫
• 自定義屬性或變量

 SCSS 的功能

SCSS 支持使用變量 —— 避免冗雜的代碼

我們其實可以在我們的樣式表中重用一堆的顏色 color 或其他元素定義（例如字體 font ）。為了做到在統(tǒng)一的一個地方聲明這些可重用的東西，SCSS 為我們提供了變量功能，讓我們能夠用一個變量名表示某個顏色，并在項目的其它地方使用該變量名，而不是重寫一遍顏色值。

例如下面這個例子：

$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);
}

但是在運行時 CSS 自定義屬性比 SCSS 變量更耗時。

這是因為瀏覽器會在運行時去處理這些屬性。而 SCSS 則相反，它在預(yù)處理階段會被轉(zhuǎn)化為 CSS，并去處理變量。因此，SCSS 中變量的使用和代碼的重用相比 CSS 而言有著更好的性能。

SCSS 允許嵌套的語法 —— 更簡潔的源代碼

假如有下面這樣的 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ù)聲明同一個父元素。

但如果使用 SCSS 的嵌套語法，我們可以編寫更簡潔的代碼。上述的代碼如果用 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è)計組件似乎更加優(yōu)雅而簡潔。

@extend 功能 —— 避免重復(fù)同樣的樣式！

在 SCSS 中，我們可以使用 @extend 在不同的選擇器中共享相同的屬性。帶有占位符的 @extend 的使用方法如下所示：

%unstyled-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

%unstyled-list 是一個可以避免重復(fù)編寫代碼的語法糖，我們可以在不同的地方使用這個列表樣式模版，例如說：

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

.advertisements {
    @extend %unstyled-list;
}

.dashboard {
    @extend %unstyled-list;
}

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

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

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

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

• 隨著 Web 應(yīng)用的不斷發(fā)展，樣式表會變得越發(fā)復(fù)雜和龐大。CSS 的嵌套功能將大幅度地提高代碼的可讀性，讓我們在開發(fā)此類項目的時候得心應(yīng)手。但是，截止撰寫本文的時間，CSS 尚未支持該功能。
• CSS 無法處理流控制規(guī)則。 SCSS 內(nèi)置提供了諸如 @if 、 @else 、 @each 、 for 和 @while 的流控制規(guī)則。作為程序員，我發(fā)現(xiàn)這個功能對于定義樣式來說是非常有用的。這也讓我們可以編寫更少更簡潔的代碼。
• 此外，SCSS 還支持數(shù)字運算符的標準集，而在 CSS 中我們必須使用 calc() 函數(shù)才能完成數(shù)值運算。SCSS 的數(shù)值運算還能在其兼容的單位之間進行自動轉(zhuǎn)換。

但是, calc() 這個 CSS 函數(shù)幾乎沒有限制，例如除法中除數(shù)必須是數(shù)字，或是對于乘法運算至少有一個參數(shù)是數(shù)字。

• 另一個重要方面是樣式重用，這是 SCSS 的”殺手锏“。在這個方面，SCSS 提供了許多功能，例如內(nèi)置模塊、映射、循環(huán)和變量。

因此我認為，即使 CSS 已經(jīng)誕生了很多新功能，SCSS 仍然是更好的選擇。你可以在下面的評論區(qū)中談?wù)勀愕南敕ā?/p>

到此這篇關(guān)于CSS3 真的會替代 SCSS 嗎的文章就介紹到這了,更多相關(guān)CSS3 會替代 SCSS 嗎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論