Sass 語法格式

2021-07-29 17:45:02 字數 1205 閱讀 4937

整理自慕課筆記

這裡說的 sass 語法是 sass 的最初語法格式,他是通過 tab 鍵控制縮排的一種語法規則,而且這種縮排要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 sass 老版本,其檔名以「.sass」為副檔名。

來看乙個 sass 語法格式的簡單示例。假設我們有一段這樣的 css **:

body

現在用 sass 的語法格式來編寫:

$font

-stack: helvetica, sans-serif

$primary

-color: #333

body

font: 100

%$font

-stack

color: $primary

-color

在整個 sass **中,我們沒看到類似 css 中的大括號和分號。

注:這種語法格式對於前端人員都不太容易接受,而且容易出錯。

scss 是 sass 的新語法格式,從外形上來判斷他和 css 長得幾乎是一模一樣,**都包裹在一對大括號裡,並且末尾結束處都有乙個分號。其檔名格式常常以「.scss」為副檔名。

同樣的這段 css **, 我們使用 scss 語法格式將按下面這樣來書寫:

$font

-stack: helvetica, sans-serif;

$primary

-color: #333;

body

這樣的語法格式對於從事前端工作的同學來說更易於接受,這也是 scss 為什麼更被前端人員青眯的原因。

不管是 sass 的語法格式還是 scss 的語法格式,他們的功能都是一樣的,不同的是其書寫格式和副檔名不同,來看乙個簡單的對比圖:

正因為如此,有不少同學使用 sass 新的語法規則,而副檔名依舊使用的是「.sass」,這也就造成血案了,編譯時說編譯不出來。在此特別提醒新同學:「.sass」只能使用 sass 老語法規則(縮排規則),「.scss」使用的是 sass 的新語法規則,也就是 scss 語法規則(類似 css 語法格式)。

SASS 簡明語法

sass 簡明語法 標籤 空格分隔 未分類 規則與指令 import 用於匯入 css 檔案 或 scss 檔案,被匯入檔案中的 mixins 在將當前檔案中可用。除當前路徑外,可通過配置 load paths 或 load path 設定搜尋路徑。匯入檔案時,當檔案 擴充套件名為 css 以 ht...

sass基礎語法

變數 width 300px 定義乙個變數 width width 使用定義的變數 str hello.jpeg background image url img str 使用 拼接 background image url img 使用 拼接資料型別 width 300px number div ...

Sass 插值語法

你可以通過 插值語法在選擇器和屬性名中使用 sass 的變數 變數 name button new border border radius 斜體樣式 插值表示式 div 10px 編譯為css div button 同樣,使用 插值語句也可以把 sass 變數插入到屬性值中。但大多數情況下這種做可...