SASS、SCSS介绍

 

1. 搜索了一下，发现国内很少人认识SASS和SCSS，故在此介绍一下他们。 SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。   SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。   例如： --------------------------------- 在SCSS中使用变量 ---------------------------------     $blue: #3bbfce; $margin: 16px; .content-navigation {   border-color: $blue;   color:     darken($blue, 9%); } .border {   padding: $margin / 2;   margin: $margin / 2;   border-color: $blue; } 转换成CSS如下：   /* CSS */ .content-navigation {   border-color: #3bbfce;   color: #2b9eab; } .border {   padding: 8px;   margin: 8px;   border-color: #3bbfce; } ------------------------------------------- SCSS嵌套： -------------------------------------------   table.hl {   margin: 2em 0;   td.ln {     text-align: right;   } } li {   font: {     family: serif;     weight: bold;     size: 1.2em;   } } 转换成CSS如下：   /* CSS */ table.hl {   margin: 2em 0; } table.hl td.ln {   text-align: right; } li {   font-family: serif;   font-weight: bold;   font-size: 1.2em; } 有兴趣的同学可以到官方网站去了解一下，http://http://sass-lang.com/ ，英文的。