Sass 是什么？

Sass 是Syntactically Awesome Stylesheete Sass的縮寫，是由Hampton Catlin開發(fā)的。

Sass可以簡(jiǎn)化你的Css工作流，并可以使你的Css的擴(kuò)展和維護(hù)工作變的更加容易！

例如，曾幾時(shí)何，因?yàn)榭蛻舻男枨蟮淖兏?，你必須不斷的通過查找和替換來更改一個(gè)像素值，或者，為了能夠確定多欄布局中某一欄的寬度，你需要使用計(jì)算像素值軟件才能搞定。

Sass引入了一些新的概念如，變量，混合，嵌套和選擇器繼承。

Sass看起來似乎和css很像，但它沒有分號(hào)和大括號(hào)。

以下是css的表示：

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

在sass中將會(huì)這樣寫：

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

Sass用兩個(gè)空格縮進(jìn)來定義代碼的嵌套。

通過以上的展示，你已經(jīng)了解了Sass怎么書寫，接下來看一下一些讓sass變的如此神奇的一些東西。

變量

$red: #FF4848

在Sass中，可以使用像darken和lighten函數(shù)來修改變量值。

在下面的例子中，p標(biāo)簽中的red將會(huì)比h1中的red更深。

$red: #FF4848$fontsize: 12pxh1  color: $redp  color: darken($red, 10%)

你能夠運(yùn)用‘加’或‘減’操作符來對(duì)相同類型的變量進(jìn)行運(yùn)算，如果我們想要手動(dòng)的輕微的加深一個(gè)顏色值，可以通過'-'來減去#101，同樣我們可以通過‘+’來將字體值增大10px。

p.addition_and_subtraction  color: $red - #101  font-size: $fontsize + 10px

嵌套

嵌套可以分為兩種類型：

選擇器嵌套

選擇器嵌套是第一種類型嵌套。
sass中的嵌套和html中的嵌套是相似的。

$fontsize: 12px.speaker  .name    font:      weight: bold      size: $fontsize + 10px  .position    font:      size: $fontsize

如果你看一下編譯后生成的css，你將會(huì)看見嵌套的.speaker類下的.name類生成的css選擇器：.speaker .name。

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

屬性嵌套

“屬性嵌套”是第二種類型的嵌套。
你可以嵌套帶有相同前綴的屬性。

$fontsize: 12px.speaker  .name    font:      weight: bold      size: $fontsize + 10px  .position    font:      size: $fontsize

從以上的例子中可以看出，我們讓font:另起一行，并且給了兩個(gè)空格的縮進(jìn)，然后，就可以設(shè)置原來帶連字符的屬性了。
所以當(dāng)我們以上面的格式書寫font的屬性weight時(shí)，這種格式會(huì)自動(dòng)生成css屬性font-weight:

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

所有帶連字符的選擇器都支持以上格式。

像這種類型的嵌套對(duì)于你組織和結(jié)構(gòu)化你的css是一種神奇的方法，同時(shí)，它還可以減少?zèng)]有必要的代碼重復(fù)。

混合

混合是另一種讓人著迷的Sass特性。

混合能夠使你重用一整段Sass代碼，你甚至能夠給他們傳遞參數(shù)，同時(shí)，你還能夠確定默認(rèn)的值，這也是十分酷的！

定義一個(gè)混合，需要用到@mixin關(guān)鍵字，后面跟上你為混合選擇的名字。如果你需要一些參數(shù)，在名字后面，添加一對(duì)括號(hào)，并在括號(hào)中定義你的參數(shù)變量。如果你需要默認(rèn)值，可以再參數(shù)后面添加冒號(hào)和你想要的默認(rèn)值。

使用混合是容易的，通過調(diào)用@includSass關(guān)鍵字，后面跟著混合名和用括號(hào)包含的參數(shù)值。

下面是例子：

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

上面的Sass將會(huì)編譯生成如下的css:

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

在以上例子中，我們給h1中的radius中設(shè)定了值，而.speakr中，因?yàn)闆]有設(shè)定值，所以radius中的值為默認(rèn)值。
We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.

選擇器繼承

選擇器繼承能夠讓你實(shí)現(xiàn)選擇器可以繼承其他選擇器中的所有樣式，這也是讓人欲罷不能的！
為了能夠?qū)崿F(xiàn)它，需要使用@extend關(guān)鍵字，后面跟著你想要繼承的選擇器，這樣，想要繼承的選擇器中的樣式都會(huì)在被繼承選擇器中實(shí)現(xiàn)。

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

上面的將會(huì)編譯為如下的css

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

嘗試一下sass

通過在線的方式嘗試一下

你能體驗(yàn)Sass通過try Sass online，不需要將Sass安裝在你本地電腦。
在編譯以前，你需要選擇底部的縮進(jìn)語法。

安裝使用

Sass是一個(gè)Ruby gem，假如以前你的機(jī)子中裝有Ruby gem，很容易在機(jī)子中安裝Sass。
Sass 能被用作為一個(gè)命令行工具，將你的Sass文件編譯成css文件。
你能做這個(gè)通過定義Sass類型——監(jiān)控
sass_文件夾：樣式列表_文件夾中包含著sass文件夾和樣式列表文件夾，sass文件夾中包含的sass文件后綴名必須為.sass，樣式列表文件夾中包含的是你的輸出文件夾。監(jiān)控選項(xiàng)的選擇意味著如果你對(duì)文件作任何改變，一旦你保存他們，文件將會(huì)自動(dòng)轉(zhuǎn)變。

將css轉(zhuǎn)變?yōu)镾ass

你開始在現(xiàn)有的項(xiàng)目中使用Sass通過使用sass轉(zhuǎn)化。
進(jìn)入你的電腦，打開你想要轉(zhuǎn)化的文件夾，選擇-convert-from-css-to sass.-R意味著遞歸，.意味著當(dāng)前的目錄。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。