Sass 與 SCSS 是什么關系？

funnyZhang 發布于2019-08-30 13:07 / 2853人閱讀

摘要：下面是一個簡短的說明當我們說起，我們經常指的是兩種事物一種預處理器和一種語言。同時，預處理器有兩種不同的語法一種縮進語法一種語法歷史最開始，是的一部分，是一種預處理器，由開發者設計和開發。

我最近寫了很多 Sass 代碼，但是最近發現并不是每一個人都知道 Sass 具體是什么。下面是一個簡短的說明：

當我們說起 Sass ，我們經常指的是兩種事物：一種 css 預處理器和一種語言。我們經常這樣說，“我們正在使用 Sass”，或者 “這是一個 Sass mixin”。同時，Sass （預處理器）有兩種不同的語法：

Sass,一種縮進語法

SCSS,一種 CSS-like 語法

歷史

最開始，Sass 是Haml的一部分，Haml 是一種預處理器，由 Ruby 開發者設計和開發。因為這樣，Sass 使用類似 Ruby的語法，沒有花括號，沒有分號，具有嚴格的縮進，就像這樣：

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

你可以就看到，這和CSS代碼有很大的區別！即使你是一個 Sass（預處理器）用戶，你也會發現這和你正在使用的有很大的差別。變量的標志用 !，而不是$,分配符是=而不是:。非常怪異。

但是在2010年五月之前，Sass 就是這個樣子的。2010年5月，官方推出了一個全新的語法，被叫做 SCSS，意思是 Sassy CSS。這個語法帶來了對 CSS 友好的語法，試圖彌合 Sass 和 CSS 之間的鴻溝。

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

SCSS 和 Sass 相比更加貼近 CSS 語法。也就是說，Sass 維護者做了大量的工作，把縮進語法中的!和=換成了 SCSS 中的 $ 和 :。

現在，在開始一個新項目時，你也許疑惑要用哪種語法。讓我們來看看兩種語法的優劣。

Sass縮進語法的優劣

雖然語法看起來怪異，但是縮進語法有很多有趣的點。首先，它 更短并且更易于書寫。沒有花括號，沒有分號，你完全不需要這些東西。更好的是，你甚至不需要@mixin 或者 @include, 一個字符就足夠了：= 和 +。

同時 Sass 通過嚴格的縮進來強制 clean coding standards。因為一個錯誤的縮進就會破壞整個.sass文件，這使得整個代碼總是clean 和格式良好的。只有一種寫 Sass 代碼的方式：正確的方式。

但是請注意！縮進在 Sass 中是有意義的。當你縮進了一個元素，這意味這你將它變為了之前元素的子元素。比如:

.element-a
    color: hotpink

    .element-b
        float: left

以上會輸出下面的 CSS 代碼：

.element-a {
    color: hotpink;
}

.element-a .element-b {
    float: left;
}

將 .element-b 向右一格以為著它變成了 .element-a 的子元素，改變了輸出 CSS 代碼的結果。所以一定要小心你的代碼縮進。

另外，我覺得基于縮進的語法適合于 Ruby/Python 團隊，而不適合 PHP/Java 團隊。（這是值得商榷的，我也希望聽到不同的聲音）

SCSS語法的優劣

對于初學者，SCSS 是完全和 CSS 兼容的，這意味著幾乎為零的學習曲線。SCSS語法即是：它只是加了一些功能的 CSS。當你和沒經驗的開發者一起工作時這很重要：他們可以很快開始編碼而不需要首先去學習Sass。

此外，SCSS 還是 易于閱讀 的，因為它是有語義的，而不是用符號表示。當你讀到 @mixin，你就會知道這是一個 mixin 聲明；當你看到 @include ，你就是在引用一個 mixin。他并沒有用任何縮寫，當你大聲讀出來時所有的都很明了。

還有，現在幾乎所有 Sass 的工具，插件和 demo 都是基于 SCSS語法來開發的。隨著時間過去，SCSS 會變成大家首選的選擇。比如，你現在很難找到一個 Sass 縮進語法的高亮插件，通常都只有 SCSS 的可以用。

總結

如何選擇取決于你，但是除非你有很好的理由一定要使用縮進的語法，我強烈推薦使用 SCSS 。不僅僅它很簡單，同時他也很方便。

最后請注意 Sass 從來沒有大寫過，無論你指的是語法或者這個語言。同時， SCSS 一直是大寫的。甚至有一個網站專門來提醒你這件事!

翻譯自What’s the Difference Between Sass and SCSS?

云服務器 GPU云服務器北京騰訊云計算與騰訊是什么關系騰訊云服務器與外網是什么關系什么是關系數據庫什么是關系型數據庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/115318.html

CSS 強化裝備！Sass 安裝與使用

摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內網絡原因你懂的，導致存放在上面的資源文件間歇性連接失敗。嵌套可以進行選擇器的嵌套，表示層級關系。重要注釋管理項目文件結構預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 評論0 收藏0
CSS、Sass、Scss，以及sass和scss的區別

摘要：即元素脫離文檔流的布局，在頁面的任意位置顯示絕對定位脫離文檔流的布局，遺留下來的空間由后面的元素填充。相對定位不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區域。 1、描述 CSS 指層疊樣式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理...

caozhijian 2019-08-30 11:16 評論0 收藏0
前端架構gulp與webpack（知識點整理）

摘要：是通過加載器和插件對資源進行處理的。另外我們知道是對整個過程進行控制，所以在其配置文件中配置的每一個對項目中該配置路徑下所有的資源都可以管理。一概念介紹 gulp 是 task runner，Webpack 是 module bundler。可以這么說， Webpack 和 gulp 本身都有 95% 的功能是不能被對方替代，或者直接說和對方不重疊的。 1 什么是gulp Gulp...

willin 2019-08-21 18:34 評論0 收藏0