對(duì)于大部分前端程序員來(lái)說(shuō)，最痛苦的是莫過(guò)于寫樣式（css）了,試想一下，當(dāng)做了 一個(gè)炫酷插件，或者實(shí)現(xiàn)了多牛逼的功能，可是沒(méi)有完美樣式，是不被人寵幸的，巨了解，我身邊絕大部分的人都及其不喜歡寫樣式，一方面：嵌套多層元素時(shí)，那選擇器的寫法可不建議簡(jiǎn)寫，畢竟涉及到樣式覆蓋與權(quán)重的問(wèn)題；第二方面：對(duì)于某些程序員來(lái)說(shuō)這與體力活不差一二。可是在我看來(lái)，一個(gè)優(yōu)秀的，吸引人的web，樣式的成分還是還是處于上游的，試想一下，一個(gè)web，沒(méi)有“華麗”的表面，怎么吸引人的注意？我始終相信這樣一句話“天無(wú)絕程序員之路”，這時(shí)候sass就拯救了我們

一、什么是SASS

SASS是一種CSS的開(kāi)發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開(kāi)發(fā)，變得簡(jiǎn)單和可維護(hù)。

本文總結(jié)了SASS的主要用法。我的目標(biāo)是，有了這篇文章，日常的一般使用就不需要去看官方文檔了。

二、安裝和使用

2.1 安裝

SASS是Ruby語(yǔ)言寫的，但是兩者的語(yǔ)法沒(méi)有關(guān)系。不懂Ruby，照樣使用。只是必須先安裝Ruby，然后再安裝SASS。

假定你已經(jīng)安裝好了Ruby，接著在命令行輸入下面的命令：

　　gem install sass復(fù)制代碼

然后，就可以使用了。

2.2 使用

SASS文件就是普通的文本文件，里面可以直接使用CSS語(yǔ)法。文件后綴名是.scss，意思為Sassy CSS。

下面的命令，可以在屏幕上顯示.scss文件轉(zhuǎn)化的css代碼。（假設(shè)文件名為test。）

　 sass test.scss復(fù)制代碼

如果要將顯示結(jié)果保存成文件，后面再跟一個(gè).css文件名。

　　sass test.scss test.css復(fù)制代碼

SASS提供四個(gè)編譯風(fēng)格的選項(xiàng)：

* nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。　　 * expanded：沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼。　　 * compact：簡(jiǎn)潔格式的css代碼。　　 * compressed：壓縮后的css代碼。復(fù)制代碼

生產(chǎn)環(huán)境當(dāng)中，一般使用最后一個(gè)選項(xiàng)。

　sass --style compressed test.sass test.css復(fù)制代碼

你也可以讓SASS監(jiān)聽(tīng)某個(gè)文件或目錄，一旦源文件有變動(dòng)，就自動(dòng)生成編譯后的版本。

// watch a file　　 sass --watch input.scss:output.css　　 // watch a directory　　 sass --watch app/sass:public/stylesheets復(fù)制代碼

SASS的官方網(wǎng)站，提供了一個(gè)在線轉(zhuǎn)換器。你可以在那里，試運(yùn)行下面的各種例子。

三、基本用法

3.1 變量

SASS允許使用變量，所有變量以$開(kāi)頭。

$blue : #1875e7;　　　 div {　　　color : $blue;　　 }復(fù)制代碼

如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

$side : left;　　 .rounded {　　　　border-#{$side}-radius: 5px;　　 }復(fù)制代碼

3.2 計(jì)算功能

SASS允許在代碼中使用算式：

body {　　　　margin: (14px/2);　　　　top: 50px + 100px;　　　　right: $var * 10%;　　 }復(fù)制代碼

3.3 嵌套

SASS允許選擇器嵌套。比如，下面的CSS代碼：

div h1 {　　　　color : red;　　 }復(fù)制代碼

可以寫成：

div {　　　　hi {　　　　　　color:red;　　　　}　　 }復(fù)制代碼

屬性也可以嵌套，比如border-color屬性，可以寫成：

p {　　　　border: {　　　　　　color: red;　　　　}　　 }復(fù)制代碼

注意，border后面必須加上冒號(hào)。

在嵌套的代碼塊內(nèi)，可以使用&引用父元素。比如a:hover偽類，可以寫成：

a {　　　　&:hover { color: #ffb3ff; }　　 }復(fù)制代碼

3.4 注釋

SASS共有兩種注釋風(fēng)格。

標(biāo)準(zhǔn)的CSS注釋 /* comment */ ，會(huì)保留到編譯后的文件。

單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。

在/*后面加一個(gè)感嘆號(hào)，表示這是"重要注釋"。即使是壓縮模式編譯，也會(huì)保留這行注釋，通常可以用于聲明版權(quán)信息。

/*! 　　　　重要注釋！　　 */復(fù)制代碼

四、代碼的重用

4.1 繼承

SASS允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：

.class1 {　　　　border: 1px solid #ddd;　　 }復(fù)制代碼

class2要繼承class1，就要使用@extend命令：

.class2 {　　　　@extend .class1;　　　　font-size:120%;　　 }復(fù)制代碼

4.2 Mixin

Mixin有點(diǎn)像C語(yǔ)言的宏（macro），是可以重用的代碼塊。

使用@mixin命令，定義一個(gè)代碼塊。

@mixin left {　　　　float: left;　　　　margin-left: 10px;　　 }復(fù)制代碼

使用@include命令，調(diào)用這個(gè)mixin。

div {　　　　@include left;　　 }復(fù)制代碼

mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。

@mixin left($value: 10px) {　　　　float: left;　　　　margin-right: $value;　　 }復(fù)制代碼

使用的時(shí)候，根據(jù)需要加入?yún)?shù)：

div {　　　　@include left(20px);　　 }復(fù)制代碼

下面是一個(gè)mixin的實(shí)例，用來(lái)生成瀏覽器前綴。

@mixin rounded($vert, $horz, $radius: 10px) {　　　　border-#{$vert}-#{$horz}-radius: $radius;　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;　　 }復(fù)制代碼

使用的時(shí)候，可以像下面這樣調(diào)用：

#navbar li {@include rounded(top, left); }　　 #footer { @include rounded(top, left, 5px); }復(fù)制代碼

4.3 顏色函數(shù)

SASS提供了一些內(nèi)置的顏色函數(shù)，以便生成系列顏色。

lighten(#cc3, 10%) // #d6d65c　　 darken(#cc3, 10%) // #a3a329　　 grayscale(#cc3) // #808080　　 complement(#cc3) // #33c復(fù)制代碼

4.4 插入文件

@import命令，用來(lái)插入外部文件。

　@import "path/filename.scss";復(fù)制代碼

如果插入的是.css文件，則等同于css的import命令。

@import "foo.css";復(fù)制代碼

五、高級(jí)用法

5.1 條件語(yǔ)句

@if可以用來(lái)判斷：

p {　　　　@if 1 + 1 == 2 { border: 1px solid; }　　　　@if 5 < 3 { border: 2px dotted; }　　 }復(fù)制代碼

配套的還有@else命令：

@if lightness($color) > 30% {　　　　background-color: #000;　　 } @else {　　　　background-color: #fff;　　 }復(fù)制代碼

5.2 循環(huán)語(yǔ)句

SASS支持for循環(huán)：

@for $i from 1 to 10 {　　　　.border-#{$i} {　　　　　　border: #{$i}px solid blue;　　　　}　　 }復(fù)制代碼

也支持while循環(huán)：

$i: 6;　　 @while $i > 0 {　　　　.item-#{$i} { width: 2em * $i; }　　　　$i: $i - 2;　　 }復(fù)制代碼

each命令，作用與for類似：

@each $member in a, b, c, d {　　　　.#{$member} {　　　　　　background-image: url("/image/#{$member}.jpg");　　　　}　　 }復(fù)制代碼

5.3 自定義函數(shù)

SASS允許用戶編寫自己的函數(shù)。

@function double($n) {　　　　@return $n * 2;　　 }　　 #sidebar {　　　　width: double(5px);　　 } 復(fù)制代碼

Sass 相關(guān)面試問(wèn)題

什么是SASS？

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

1、為什么要使用SASS？

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

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

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

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

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

2、列出SASS的一些功能？

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

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

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

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

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

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

3、SASS的優(yōu)點(diǎn)是什么？

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

• 它有助于編寫CSS更快。

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

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

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

4、SASS的缺點(diǎn)是什么？

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

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

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

5、列出SASS支持的兩種語(yǔ)法？

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

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

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

6、有多少種方法可以使用SASS？

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

• 作為命令行工具

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

• 作為Rack啟用框架的插件

7、SASS中的嵌套規(guī)則是什么？

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

8、如何在SASS中引用父選擇器？

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

9、如何在SASS中寫入占位符選擇器？

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

10、列出SASS上的不同類型的運(yùn)算符？

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

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

• 顏色運(yùn)算符

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

• 布爾運(yùn)算符

• 列表運(yùn)算符

什么是數(shù)字運(yùn)算？

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

什么是彩色運(yùn)算？

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

什么是列表運(yùn)算？

列表表示使用逗號(hào)或空格分隔的一系列值。

什么是布爾運(yùn)算？

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

SASS中的括號(hào)是什么？

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

什么是SASS中的插值？

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

什么是可變默認(rèn)值？

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

什么是導(dǎo)入指令？

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

什么是媒體指令？

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

什么是擴(kuò)展指令？

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

什么是根指令？

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

什么是@if指令？

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

什么是@else if指令？

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

什么是@for指令？

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

什么是@each指令？

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

什么是@mixin指令？

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

什么是@include指令？

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

什么是mixin 參數(shù)?

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

列出兩種類型的mixin參數(shù)？

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

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

• 可變參數(shù)

什么是關(guān)鍵字參數(shù)？

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

什么是可變參數(shù)？

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

什么是函數(shù)指令？

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

什么是SASS輸出樣式？

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

什么是嵌套CSS樣式？

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

什么是擴(kuò)展CSS樣式？

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

什么是緊湊的CSS樣式？

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

什么是壓縮CSS樣式？

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

SASS縮進(jìn)語(yǔ)法的主要特點(diǎn)是什么？

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

• 要分隔語(yǔ)句，它使用換行符而不是分號(hào)（;）。

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

有多少種方法可以聲明CSS屬性？

CSS屬性可以通過(guò)兩種方式聲明:

• 屬性可以聲明為類似于CSS但沒(méi)有分號(hào)（;）。

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

什么是寫@mixin和@include指令的速記？

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

每當(dāng)SASS文件更改時(shí)，使用哪個(gè)命令來(lái)觀察文件并更新CSS？

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

什么是SASS的注釋？

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

哪個(gè)命令用于從命令行運(yùn)行SASS代碼？

sass input.scss output.css

樣式表的字符編碼的CSS規(guī)范是什么？

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

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

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

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

有多少種注釋類型？

Sass支持兩種類型的注釋:

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

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

什么是交互式shell？

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

什么是@debug指令？

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

什么是@error指令？

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

總結(jié)

以上是生活随笔為你收集整理的Sass 用法指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。