Sass 面試問題

Sass（Syntactically Awesome Stylesheet）是一種 CSS 預處理器，它有助於減少 CSS 中的重複程式碼並節省時間。它是一種更穩定、更強大的 CSS 擴充套件語言，可以清晰、結構化地描述文件樣式。

• 它是一種預處理語言，為 CSS 提供縮排語法（它自己的語法）。

• 它允許更有效地編寫程式碼，易於維護。

• 它是 CSS 的超集，包含 CSS 的所有特性，並且是一個開源預處理器，用**Ruby**編寫。

• 它比扁平的 CSS 提供了更好的文件樣式結構。

• 它使用可重用的方法、邏輯語句和一些內建函式，例如顏色操作、數學運算和引數列表。

• 它更穩定、更強大，並且與 CSS 的各個版本相容。

• 它是 CSS 的超集，基於 JavaScript。

• 它被稱為 CSS 的語法糖，這意味著它使使用者更容易閱讀或更清晰地表達事物。

• 它使用自己的語法，並編譯成可讀的 CSS。

• 你可以用更少的程式碼在更短的時間內輕鬆編寫 CSS。

• 它是一個開源預處理器，被解釋成 CSS。

• 它允許在程式設計結構中編寫簡潔的 CSS。

• 它有助於更快地編寫 CSS。

• 它是 CSS 的超集，有助於設計師和開發人員更高效、快速地工作。

• 由於 Sass 與所有版本的 CSS 相容，我們可以使用任何可用的 CSS 庫。

• 可以使用巢狀語法和有用的函式，例如顏色操作、數學運算和其他值。

• 開發人員需要時間來學習這個預處理器中的新特性。

• 如果很多人在同一個網站上工作，那麼他們會使用相同的預處理器。有些人使用 Sass，有些人直接使用 CSS 編輯檔案。所以使用該網站會變得困難。

• 可能會失去瀏覽器內建元素檢查器的優勢。

Sass 支援兩種語法，即**SCSS**和**縮排**語法。

• **SCSS (Sassy CSS)**是 CSS 語法的擴充套件，它使維護大型樣式表更容易，並且可以識別特定於供應商的語法和許多 CSS。SCSS 檔案使用副檔名**.scss**。

• **縮排**是一種較舊的語法，有時也簡稱為**Sass**。使用這種語法形式，可以簡潔地編寫 CSS。Sass 檔案使用副檔名**.sass**。

你可以用三種不同的方法使用 Sass：

• 作為命令列工具

• 作為 Ruby 模組

• 作為支援 Rack 的框架的外掛

巢狀是不同邏輯結構的組合。使用 Sass，我們可以將多個 CSS 規則彼此組合。如果你使用多個選擇器，那麼你可以將一個選擇器巢狀在另一個選擇器中以建立複合選擇器。

你可以使用**&**字元選擇父選擇器。它指示應該插入父選擇器的位置。

Sass 使用類或ID選擇器支援佔位符選擇器。在普通的 CSS 中，這些是用“#”或“.”指定的，但在 Sass 中它們被替換為“%”。

有 5 種類型的操作：

• 數字運算

• 顏色運算

• 字串運算

• 布林運算

• 列表運算

它允許進行加、減、乘、除等數學運算。

它允許使用顏色分量以及算術運算。

列表表示一系列值，這些值用逗號或空格分隔。

你可以使用 and、or 和 not 運算子對 Sass 指令碼執行布林運算。

括號是一對符號，通常用圓括號 ( ) 或方括號 [] 標記，它提供影響運算順序的符號邏輯。

它使用#{ }語法在選擇器和屬性名稱中提供 SassScript 變數。你可以在花括號內指定變數或屬性名稱。

你可以透過在變數值的末尾新增!default標誌來設定變數的預設值。如果變數已經賦值，它不會重新賦值。

它直接獲取要匯入的檔名，所有匯入的檔案都將合併到一個 CSS 檔案中。

它為不同的媒體型別設定樣式規則。

它用於共享選擇器之間的規則和關係。它可以擴充套件一個類中的所有其他類樣式，也可以應用其自身的特定樣式。

它是一組巢狀規則，能夠在文件的根部建立樣式塊。

它用於根據表示式求值的結果有選擇地執行程式碼語句。

@else if 語句與 @if 指令一起使用，當 @if 語句失敗時，嘗試 @else if 語句，如果它們也失敗，則執行 @else。

它允許你在迴圈中生成樣式。計數器變數用於設定每次迭代的輸出。

在 @each 指令中，定義一個變數，其中包含列表中每個專案的 value。

它用於定義 mixin，mixin 的名稱後面可以選擇包含變數和引數。

它用於在文件中包含 mixin，mixin 定義的樣式可以包含到當前規則中。

SassScript 值可以作為 mixin 中的引數，在包含 mixin 時給出，並在 mixin 中作為變數使用。

有兩種型別的 mixin 引數：

• 關鍵字引數

• 變數引數

它用於在 mixin 中包含引數。命名的引數可以以任何順序傳遞，並且可以省略引數的預設值。

變數引數用於向 mixin 傳遞任意數量的引數。它包含傳遞給函式或 mixin 的關鍵字引數。

使用函式指令，你可以建立自己的函式並在你的指令碼上下文中使用它們，或者與任何值一起使用。

Sass 生成的 CSS 檔案包含預設的 CSS 樣式，它反映了文件的結構。預設的 CSS 樣式很好，但可能並不適用於所有情況。

巢狀樣式是 Sass 的預設樣式。當處理大型 CSS 檔案時，這種樣式非常有用。

在展開式輸出樣式中，每個屬性和規則都有自己的一行。與巢狀 CSS 樣式相比，它佔用的空間更大。

緊湊型 CSS 樣式與展開式和巢狀式相比，佔用的空間更小。它主要關注選擇器而不是其屬性。

與所有其他樣式相比，壓縮型 CSS 樣式佔用的空間最小。它只提供空格來分隔選擇器，並在檔案末尾換行。

• 它使用縮排而不是{和}來分隔塊。

• 為了分隔語句，它使用換行符而不是分號 (;)。

• 屬性宣告和選擇器必須放在自己的行上，{和}內的語句必須放在新行和縮排。

• 它使用縮排而不是{和}來分隔塊。

• 為了分隔語句，它使用換行符而不是分號 (;)。

• 屬性宣告和選擇器必須放在自己的行上，{和}內的語句必須放在新行和縮排。

CSS 屬性可以用兩種方法宣告：

• 可以宣告屬性類似於 CSS，但不帶分號 (;)。

• 冒號 (:)將作為每個屬性名稱的字首。

你可以使用 = 表示 @mixin 指令，使用 + 表示 @include 指令，這需要更少的輸入，使你的程式碼更簡單、更容易閱讀。

sass --watch C:\ruby\lib\sass\style.scss:style.css

註釋佔據整行，包含所有巢狀在其下的文字，並且它們在縮排語法中是基於行的。

sass input.scss output.css

• 首先，它檢查Unicode位元組，然後是@charset宣告，最後是Ruby字串編碼。

• 接下來，如果沒有任何設定，則它將字元集編碼視為UTF-8。

• 使用@charset宣告顯式確定字元編碼。只需在樣式表開頭使用“@charset 編碼名稱”，Sass就會認為這是給定的字元編碼。

• 如果Sass的輸出檔案包含非ASCII字元，則它將使用@charset宣告。

Sass支援兩種型別的註釋：

• 多行註釋 - 這些註釋使用/*和*/編寫。多行註釋將保留在CSS輸出中。

• 單行註釋 - 這些註釋使用//後跟註釋編寫。單行註釋不會保留在CSS輸出中。

它使用命令列評估SassScript表示式。您可以使用sass命令列以及-i選項執行shell。

它檢測錯誤並將SassScript表示式的值顯示到標準錯誤輸出流。

它將SassScript表示式的值顯示為致命錯誤。