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:另起一行，并且给了两个空格的缩进，然后，就可以设置原来带连字符的属性了。
新闻热点
疑难解答
