sass、scss、和css的關係

說到css,相信大家都知道,css樣式是用來修飾網頁頁面結構的。那麼sass、scss又是做什麼的呢?接下來我們來一起了解一下。

要了解css、sacc和scss的關係就要從css預處理器開始說起。


什麼是css預處理器?css預處理器是用一種專門的語言,進行網頁的樣式設計,之後在被編譯爲正常的css文件,以供項目使用。

使用css預處理語言的好處是css更加簡潔、方便修改、可讀性強、適應新強並且更易於代碼的維護。

css和sass的關係:

sass是由buby語言編寫的一款css預處理語言,和html一樣有嚴格的縮進風格,和css編寫規範有着很大的出入,是不使用花括號和分號的,所以不被廣爲接受。

sass和scss的關係:

sass和scss其實是一樣的css預處理語言,其後綴名是分別爲 .sass和.scss兩種。

SASS版本3.0之前的後綴名爲.sass,而版本3.0之後的後綴名.scss。

兩者是有不同的,繼sass之後scss的編寫規範基本和css一致,sass時代是有嚴格的縮進規範並且沒有‘{}’和‘;’。而scss則和css的規範是一致的。

示例代碼:

sass

#sidebar
  width: 30%
  background-color: #faa

scss

#sidebar {
  width: 30%;
  background-color: #faa;
}

SCSS 和 CSS 寫法無差別:

SCSS 和 CSS 寫法無差別,這也是 Sass 後來越來越受大衆喜歡原因之一。簡單點說,把你現有的“.css”文件直接修改成“.scss”即可使用。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章