Sass 面試問題

SASS（Syntactically Awesome Stylesheet）是一個(gè)CSS預(yù)處理器，有助于減少CSS的重復(fù)，節(jié)省時(shí)間。 它是更穩(wěn)定和強(qiáng)大的CSS擴(kuò)展語言，描述文檔的樣式干凈和結(jié)構(gòu)。

• 它是預(yù)處理語言，它為CSS提供縮進(jìn)語法（它自己的語法）。

• 它允許更有效地編寫代碼和易于維護(hù)。

• 它是包含CSS的所有功能的CSS的超集，是一個(gè)開源的預(yù)處理器，以 Ruby 編碼。

• 它提供了比平面CSS好的結(jié)構(gòu)格式的文檔樣式。

• 它使用可重復(fù)使用的方法，邏輯語句和一些內(nèi)置函數(shù)，如顏色操作，數(shù)學(xué)和參數(shù)列表。

• 它是更穩(wěn)定，強(qiáng)大，與CSS的版本兼容。

• 它是超集的CSS和基于JavaScript。

• 它被稱為CSS的語法糖，這意味著它使用戶更容易閱讀或表達(dá)的東西更清楚。

• 它使用自己的語法并編譯為可讀的CSS。

• 你可以在更少的時(shí)間內(nèi)輕松地編寫CSS代碼。

• 它是一個(gè)開源的預(yù)處理器，被解釋為CSS。

• 它允許在編程結(jié)構(gòu)中編寫干凈的CSS。

• 它有助于編寫CSS更快。

• 它是CSS的超集，幫助設(shè)計(jì)師和開發(fā)人員更有效率和快速地工作。

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

• 可以使用嵌套語法和有用的函數(shù)，如顏色操作，數(shù)學(xué)和其他值。

• 開發(fā)人員需要時(shí)間了解此預(yù)處理器中存在的新功能。

• 如果更多的人在同一個(gè)網(wǎng)站上工作，那么將使用相同的預(yù)處理器。 有些人使用Sass，有些人使用CSS直接編輯文件。 因此，它將變得難以與現(xiàn)場工作。

• 有機(jī)會失去瀏覽器的內(nèi)置元素檢查器的好處。

SASS支持兩種語法，即 SCSS 和縮進(jìn)語法。

• SCSS（Sassy CSS）是CSS語法的擴(kuò)展，可以更容易地維護(hù)大型樣式表，并且可以識別供應(yīng)商特定的語法和許多CSS。 SCSS文件使用擴(kuò)展名 .scss 。

• 縮進(jìn)是較舊的語法，有時(shí)僅稱為 Sass 。 使用這種形式的語法，可以簡潔地編寫CSS。 SASS文件使用擴(kuò)展名 .sass 。

您可以使用三種不同的方式使用SASS:

• 作為命令行工具

• 作為一個(gè)Ruby模塊

• 作為Rack啟用框架的插件

嵌套是不同邏輯結(jié)構(gòu)的組合。 使用SASS，我們可以將多個(gè)CSS規(guī)則相互組合。 如果使用多個(gè)選擇器，則可以在另一個(gè)選擇器中使用一個(gè)選擇器來創(chuàng)建復(fù)合選擇器。

您可以使用＆amp; 字符選擇父級選擇器。 它告訴父選擇器應(yīng)該插入的位置。

SASS使用 class 或 id 選擇器支持占位符選擇器。 在正常CSS中，這些用“＃"或“。"指定，但在SASS中，它們替換為“％"。

有5種類型的運(yùn)算符:

• 數(shù)字運(yùn)算符

• 顏色運(yùn)算符

• 字符串運(yùn)算符

• 布爾運(yùn)算符

• 列表運(yùn)算符

它允許諸如加法，減法，乘法和除法的數(shù)學(xué)運(yùn)算。

它允許使用顏色分量和算術(shù)運(yùn)算。

列表表示使用逗號或空格分隔的一系列值。

您可以使用and、or和not（與或非）對Sass腳本執(zhí)行布爾運(yùn)算。

括號是一對標(biāo)記，通常用圓括號（）或方括號[]來標(biāo)記，這提供了影響操作順序的符號邏輯。

它使用＃{} 語法提供選擇器和屬性名稱中的SassScript變量。 您可以在花括號中指定變量或?qū)傩悦Q。

您可以通過向變量值的結(jié)尾添加！default 標(biāo)志來設(shè)置變量的默認(rèn)值。如果值已經(jīng)分配給變量，則不會重新分配該值。

它直接采用文件名導(dǎo)入，所有導(dǎo)入的文件將合并到一個(gè)單一的CSS文件。

它將樣式規(guī)則設(shè)置為不同的媒體類型。

它用于共享選擇器之間的規(guī)則和關(guān)系。 它可以在一個(gè)類中擴(kuò)展所有其他類樣式，也可以應(yīng)用自己的特定樣式。

它是一個(gè)嵌套規(guī)則的集合，它能夠在文檔的根節(jié)點(diǎn)創(chuàng)建樣式塊。

它用于基于表達(dá)式求值的結(jié)果選擇性地執(zhí)行代碼語句。

@else if語句與@if指令一起使用，每當(dāng)@if語句失敗，則嘗試@else if語句，如果它們也失敗，則執(zhí)行@else。

它允許您在循環(huán)中生成樣式。 計(jì)數(shù)器變量用于設(shè)置每次迭代的輸出。

在@each指令中，定義了一個(gè)包含列表中每個(gè)項(xiàng)目的值的變量。

它用于定義mixin，其中包含可選的mixin名稱之后的變量和參數(shù)。

它用于在文檔中包含mixin，由mixin定義的樣式可以包含在當(dāng)前規(guī)則中。

SassScript值可以作為mixin中的參數(shù)，當(dāng)mixin包含并在mixin中作為變量使用時(shí)，可以將其作為參數(shù)。

有兩種類型的mixin參數(shù):

• 關(guān)鍵字參數(shù)

• 可變參數(shù)

它用于在mixin中包含參數(shù)。 命名的參數(shù)可以按任何順序傳遞，參數(shù)的默認(rèn)值可以省略。

變量參數(shù)用于將任意數(shù)量的參數(shù)傳遞給mixin。 它包含傳遞給函數(shù)或mixin的關(guān)鍵字參數(shù)。

使用函數(shù)指令，可以創(chuàng)建自己的函數(shù)，并在腳本上下文中使用它們，或者可以使用任何值。

SASS生成的CSS文件由反映文檔結(jié)構(gòu)的默認(rèn)CSS樣式組成。 默認(rèn)的CSS樣式很好，但可能不適合所有情況。

嵌套樣式是SASS的默認(rèn)樣式。 這種方式的樣式在處理大型CSS文件時(shí)非常有用。

在擴(kuò)展輸出樣式中，每個(gè)屬性和規(guī)則都有自己的線。 與嵌套CSS樣式相比，它需要更多的空間。

緊湊的CSS風(fēng)格競爭力比Expanded和Nested占用更少的空間。 它主要關(guān)注選擇器而不是其屬性。

與所有其他樣式相比，壓縮的CSS樣式占用最少的空間。 它僅提供空格，以在文件末尾分隔選擇器和換行符。

• 它使用縮進(jìn)而不是 {和} 來分隔塊。

• 要分隔語句，它使用換行符而不是分號（;）。

• 屬性聲明和選擇器必須放在自己的行上， {和} 中的語句必須放在 >和縮進(jìn)。

CSS屬性可以通過兩種方式聲明:

• 屬性可以聲明為類似于CSS但沒有分號（;）。

• colon（:）將以每個(gè)屬性名稱為前綴。

您可以使用= for @mixin指令和+ for @include指令，這需要更少的鍵入，使您的代碼更簡單，更容易閱讀。

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

注釋占用整行并包圍嵌套在它們下面的所有文本，它們是基于行的縮進(jìn)語法。

sass input.scss output.css

• 首先它檢查Unicode字節(jié)，下一個(gè) @charset 聲明，然后檢查Ruby字符串編碼。

• 接下來，如果未設(shè)置任何內(nèi)容，則會將字符集編碼視為。

• 使用 @charset 聲明顯式地確定字符編碼。 只需在樣式表的開頭使用“@charset encoding name"，SASS將假設(shè)這是給定的字符編碼。

• 如果SASS的輸出文件包含非ASCII字符，那么它將使用 @charset 聲明。

Sass支持兩種類型的注釋:

• 多行注釋 - 使用/ *和* /寫入。 多行注釋保存在CSS輸出中。

• 單行注釋 - 這些是使用 // 和注釋寫成的。 單行注釋不會保留在CSS輸出中。

它使用命令行評估SassScript表達(dá)式。 您可以使用sass命令行和 - i 選項(xiàng)運(yùn)行shell。

它檢測錯(cuò)誤并將SassScript表達(dá)式值顯示到標(biāo)準(zhǔn)錯(cuò)誤輸出流。

它將SassScript表達(dá)式值顯示為致命錯(cuò)誤。