SCSS 簡單介紹

一.背景介紹:

css不是一種真正意義上的程式語言，不具有程式語言的變數、迴圈、遍歷和繼承等特性。

為了解決css的這些缺點，能夠對css進行預處理的"中間語言"就產生了，以此來實現某些程式設計特性。

也就是在編寫中間語言過程中，可以使用程式設計方式和思維，中間語言不能直接被瀏覽器所解析。

最後將這個中間語言編譯成真正的css，這樣就可以供瀏覽器解析使用，類同於TypeScript和JavaScript的關係。

二.關於scss:

SASS是最早的css預處理語言之一。

為了適應程式設計風格的需求，sass在程式設計風格上做了一些修改，現在稱之為SCSS。

SCSS增加了一些新的功能，增強了對css3的支援，其語法完全相容CSS3，並且繼承了sass的強大功能。

任何標準的css3樣式表都是具有相同語義的有效的scss檔案。另外，SCSS還能識別大部分css hacks和特定於瀏覽器的語法，例如:古老的IE filter。由於SCSS是CSS的擴充套件，因此，所有在css中工作的程式碼也能在scss中正常工作。

現在學習scss完全沒有必要關注以前sass的規則。

三.SCSS程式碼:

下面就是一小段SCSS程式碼例項，給初學者一個初步印象:

[Scss] 純文字檢視 複製程式碼
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

編譯後的程式碼如下:

[CSS] 純文字檢視 複製程式碼
nav {
  width: 100px;
  color: #F90;
}