Sass 是什么？

Sass 是Syntactically Awesome Stylesheete Sass的縮寫，是由Hampton Catlin開發的。

Sass可以簡化你的Css工作流，并可以使你的Css的擴展和維護工作變的更加容易！

例如，曾幾時何，因為客戶的需求的變更，你必須不斷的通過查找和替換來更改一個像素值，或者，為了能夠確定多欄布局中某一欄的寬度，你需要使用計算像素值軟件才能搞定。

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

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

以下是css的表示：

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

在sass中將會這樣寫：

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

Sass用兩個空格縮進來定義代碼的嵌套。

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

變量

$red: #FF4848

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

在下面的例子中，p標簽中的red將會比h1中的red更深。

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

你能夠運用‘加’或‘減’操作符來對相同類型的變量進行運算，如果我們想要手動的輕微的加深一個顏色值，可以通過'-'來減去#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，你將會看見嵌套的.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:另起一行，并且給了兩個空格的縮進，然后，就可以設置原來帶連字符的屬性了。
所以當我們以上面的格式書寫font的屬性weight時，這種格式會自動生成css屬性font-weight:

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

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

像這種類型的嵌套對于你組織和結構化你的css是一種神奇的方法，同時，它還可以減少沒有必要的代碼重復。

混合

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

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

定義一個混合，需要用到@mixin關鍵字，后面跟上你為混合選擇的名字。如果你需要一些參數，在名字后面，添加一對括號，并在括號中定義你的參數變量。如果你需要默認值，可以再參數后面添加冒號和你想要的默認值。

使用混合是容易的，通過調用@includSass關鍵字，后面跟著混合名和用括號包含的參數值。

下面是例子：

@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將會編譯生成如下的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中設定了值，而.speakr中，因為沒有設定值，所以radius中的值為默認值。
We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.

選擇器繼承

選擇器繼承能夠讓你實現選擇器可以繼承其他選擇器中的所有樣式，這也是讓人欲罷不能的！
為了能夠實現它，需要使用@extend關鍵字，后面跟著你想要繼承的選擇器，這樣，想要繼承的選擇器中的樣式都會在被繼承選擇器中實現。

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

上面的將會編譯為如下的css

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

嘗試一下sass

通過在線的方式嘗試一下

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

安裝使用

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

將css轉變為Sass

你開始在現有的項目中使用Sass通過使用sass轉化。
進入你的電腦，打開你想要轉化的文件夾，選擇-convert-from-css-to sass.-R意味著遞歸，.意味著當前的目錄。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。