http://rd.189works.com/article-108018-1.html

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: 12px h1 color: $red p 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

?

?

?

轉載于:https://www.cnblogs.com/JoannaQ/archive/2013/03/20/2970407.html

總結

以上是生活随笔為你收集整理的SASS初学者入门（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。