在一些国外知名的JS框架或者是控件中总是能看到.scss这样的文件，用记事本打开发现内容跟css文件差不多。搜索了一下，发现国内很少人认识SASS和SCSS，故在此介绍一下他们。

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。

在SCSS中使用变量

1. $blue: #3bbfce; 
2. $margin: 16px; 
3.   
4. .content-navigation { 
5.   border-color: $blue; 
6.   color:darken($blue, 9%); 
7. } 
8.   
9. .border { 
10.   padding: $margin / 2; 
11.   margin: $margin / 2; 
12.   border-color: $blue; 
13. } 
14.   

转换成CSS如下：

---------------------------------------

SCSS嵌套：

-------------------------------------------