本文將介紹Sass的一些基本概念，比如說(shuō)“變量”、“混合參數(shù)”、“嵌套”和“選擇器繼承”等。著作權(quán)歸作者所有。

什么是Sass？

Sass是一門(mén)非常優(yōu)秀的CSS預(yù)處語(yǔ)言，他是由Hampton Catlin創(chuàng)立的。它可以減化CSS的工作流，使開(kāi)發(fā)者更加容易開(kāi)發(fā)，維護(hù)CSS樣式。

例如，你是否在特定的樣式表中查找和替換一個(gè)十六進(jìn)制的顏色而煩惱？或者你正在尋找一個(gè)計(jì)算器為多欄布局的寬度計(jì)算而頭痛？（不用擔(dān)心，Sass能幫你解決這樣的煩惱）。

Sass和CSS非常相似，但是在Sass中是沒(méi)有花括號(hào)（｛｝）和分號(hào)（；）的。

如下面的CSS：

#skyscraper_ad { display: block; width: 120px; height: 600px; } #leaderboard_ad { display: block; width: 728px; height: 90px; }

在Sass中，上面的CSS代碼你要寫(xiě)成下面這樣：

#skyscraper_ad display: block width: 120px height: 600px #leaderboard_ad display: block width: 728px height: 90px

Sass使用兩個(gè)空格來(lái)定義嵌套的區(qū)別。

你現(xiàn)在看過(guò)了Sass是如何書(shū)寫(xiě)的，接下來(lái)我們一起看一些Sass方面的介紹，讓Sass在你手中變得不再可怕。

變量（Variables）

在Sass中定義變量，是用“$”符號(hào)聲明，然后后面跟變量名稱(chēng)。在這個(gè)例子中，定義變量“red”，在變量名后使用冒號(hào)（：），然后緊跟變量值：

$red: #ff4848

Sass還內(nèi)置了函數(shù)功能，例如變暗（darken）和變亮（lighten），他們可以幫助你修改變量。

在這個(gè)例子中，段落要使用一個(gè)比“h1”標(biāo)簽更深的紅色，就可以這樣使用：

$red: #ff4848 $fontsize: 12px h1color: $red pcolor: darken($red,10%)

你也可以在相同的變量上做加減運(yùn)算的操作。如果我們想將顏色變黑，我們也可以在變量的基礎(chǔ)上減一個(gè)十六進(jìn)制的顏色，例如“#101”。如果我們想把字號(hào)調(diào)大“10px”，我們也可以在字號(hào)的變量基礎(chǔ)上加上這個(gè)值。

/*加法和減法*/ color: $red - #101 font-size: $fontsize + 10px

嵌套（Nesting）

Sass有兩種嵌套規(guī)則：

選擇器嵌套

選擇器嵌套是Sass嵌套規(guī)則中的第一種。

Sass的嵌套類(lèi)似于你的HTML嵌套：

$fontsize: 12px .speaker.namefont:weight: boldsize: $fontsize + 10px.positionfont:size: $fontsize

如果你看了Sass生成的CSS，你可以看到“.name”嵌套在“.speaker”內(nèi)，這里生成的CSS選擇器是“.speaker .name”。

.speaker .name {font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

屬性嵌套

屬性嵌套是Sass嵌套的第二種

相同前綴的屬性，你可以進(jìn)行嵌套：

$fontsize: 12px .speaker.namefont:weight: boldsize: $fontsize + 10px.positionfont:size: $fontsize

在上面的例子中，我們有一個(gè)“font:”，在新的一行增加兩個(gè)空格放置他的屬性（通常我們看到的是使用連字符“-”來(lái)連接）。

因此我們先寫(xiě)“font:”屬性，然后斷行空兩格，寫(xiě)“weight:”屬性，在CSS中就變成了“font-weight:”屬性。

.speaker .name {font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

所有連字符的選擇器都支持。

這種嵌套用來(lái)組織你的CSS結(jié)構(gòu)是非常棒的，可以讓你不在寫(xiě)一些重復(fù)的代碼。

混合（Mixins）

混合是Sass中另一個(gè)很優(yōu)秀的特性。混合可以讓你定義一整塊的Sass代碼，甚至你可以給他們定義參數(shù)，更酷的是你還可以設(shè)置默認(rèn)值。

使用關(guān)鍵詞“@mixin”來(lái)定義Sass的混合，你可以你自己的喜好定義一個(gè)混合的名稱(chēng)。如果你需要設(shè)置一些參數(shù)，你還可以將參數(shù)設(shè)置到這些代碼片段中；如果你需要設(shè)置默認(rèn)值，你也可以在混合的代碼片段中設(shè)置默認(rèn)值。

調(diào)用混合代碼片段，可以使用Sass中的關(guān)鍵詞“@include”調(diào)用，并在其后面跟上你的混合代碼片段的名稱(chēng)，你還可以使用括號(hào)，在里面設(shè)置一些參數(shù)。

來(lái)看一個(gè)簡(jiǎn)單的例子：

@mixin border-radius($amount: 5px)-moz-border-radius: $amount -webkit-border-radius: $amount border-radius: $amount h1 @include border-radius(2px) .speaker @include border-radius

上面的Sass代碼將轉(zhuǎn)譯成下面的CSS代碼：

h1 {-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .speaker { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

我們給“h1”元素指定了一個(gè)特定的圓角值，但是并沒(méi)有給“.speaker”指定任何值，因此他將使用的是默認(rèn)值“5px”。

選擇器繼承

選擇器的繼承可以讓你的選擇器繼承另一個(gè)選擇器的所有樣式風(fēng)格，這是一個(gè)非常優(yōu)秀的特性。

使用選擇器的繼承，要使用Sass的關(guān)鍵詞“@extend”，后而跟上你需要繼承的選擇器，那么這個(gè)選擇器就會(huì)繼承另一個(gè)選擇器的所有樣式。（當(dāng)然他們是有繼承和被繼承的關(guān)系）

h1border: 4px solid #ff9aa9 .speaker@extend h1border-width: 2px

上面的Sass代碼將轉(zhuǎn)譯成下面的CSS代碼：

h1, .speaker {border: 4px solid #ff9aa9; } .speaker { border-width: 2px; }

嘗試Sass

網(wǎng)上嘗試

如果你的本地電腦沒(méi)有安裝Sass，你可以在網(wǎng)上嘗試使用。

在轉(zhuǎn)譯之前，你需要選擇底部的“Indented Syntax”選項(xiàng)。

安裝

Sass是一個(gè)Ruby gem。如果你的本地已經(jīng)安裝了Ruby gems，那么可以在你命令終端直接運(yùn)行：

gem install sass

Sass也可以使用命令行工具將Sass文件轉(zhuǎn)譯成CSS文件。

你可以鍵入“sass --watch sass_folder:stylesheets_folder”，這個(gè)時(shí)候你的Sass文件（文件擴(kuò)展名必須是.sass）stylesheets_folder就會(huì)把轉(zhuǎn)譯的樣式文件保存在“sass_folder”目錄，當(dāng)然你的sass文件必須保存在這個(gè)文件目錄中。“--watch”選項(xiàng)的意思就是將這個(gè)目錄中的sass文件轉(zhuǎn)譯成樣式文件。

CSS轉(zhuǎn)換成Sass

在現(xiàn)有的項(xiàng)目中通過(guò)“sass-convert”使用sass。

在終端進(jìn)入你的目錄中，鍵入“sass-convert --from css --to sass -R .”。將CSS轉(zhuǎn)換成Sass。其中“-R”表示遞歸，“.”表示當(dāng)前目錄。

Scss

在這里我們只介紹了Sass的語(yǔ)法，然后還有一個(gè)新的名稱(chēng)叫SCSS或者Sassy CSS。不同的是SCSS看起來(lái)更像CSS，但他也像Sass一樣具有變量、混合、嵌套和選擇器繼承等特性。

總結(jié)

在你組織和管理CSS時(shí)，Sass真的很優(yōu)秀。還有個(gè)項(xiàng)目Compass,它在CSS框架中使用混合模式，而不是去修改你的HTML結(jié)構(gòu)或者重新定義你的類(lèi)名。

著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
原文:?https://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html???w3cplus.com

?

轉(zhuǎn)載于:https://www.cnblogs.com/lauzhishuai/p/9530296.html

總結(jié)

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

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