Sass基礎學習No.1-Sass簡介

發表於 更新於 分類於 ，

SASS介紹

  • 英文全稱：Syntactically Awesome Stylesheets。

  • Sass包括兩套語法，通常情況下，這兩套語法通過.scss和.sass兩個副檔名區分開。

    1. 「SCSS」，使用和CSS一樣的塊語法，即使用大括號將不同的規則分開，使用分號將具體的樣式分開。
    2. 「SASS」，使用縮排來區分代碼塊，並且用換行將不同規則分隔開。

  • Sass支援定義變數。變數以美元符號（$）作為開頭。變數用冒號（:）賦值。

  • 變數支援資料類型：數值（可包括單位)、字串、顏色、布林值。

  • 支援代碼塊的巢狀。

  • 可使用Mixin、迴圈、繼承。

Sass

Sass兩種寫法

SASS

使用縮排來區分代碼塊，並且用換行將不同規則分隔開。

1
2
3
.content-navigation
  border-color: $blue
  color: darken($blue, 10%)

SCSS

使用大括號將不同的規則分開，使用分號將具體的樣式分開。

1
2
3
4
.content-navigation{
  border-color: $blue;
  color: darken($blue, 10%);
}

Sass編譯方式

可以透過軟體、gulp webpack或編輯器內建插件來編譯。

Sass官網介紹的編譯方式及軟體

  • 軟體方面推薦：Prepros。
  • gulp webpack需要一定程度的JS基礎。
  • VS code編輯器插件：Live Sass Compiler。

以Prepros做編譯

  1. 把整個專案放進Prepros。
  2. 將不需要的檔案做隱藏。
  3. 在瀏覽器預覽。

當編譯失敗，Prepros會出現哭臉喔！點擊後可以知道錯誤內容。

Prepros

出自Prepros官網

Prepros

出自Prepros官網

Prepros

出自Prepros官網

以Live Sass Compiler做編譯

點擊VS code 下方的 Watch my Sass 就會自動編譯。

編譯失敗，控制台出現錯誤內容。

Live Sass Compiler