SASS是最早、最成熟的CSS预处理，它可以通过变量、嵌套、函数、继承等使CSS变得更加强大，更加优雅，而且完全兼容CSS的语法。SASS可以帮助我们更好地组织大CSS文件，更加便捷地开发和运行CSS文件，在类似Compass的类库的帮助下，我们将更加如虎添翼。
//使用SCSS
$baseFontsize:14px;
$Largefontsize:16px;
body{
font-size:$baseFontsize;
p{
font-size:$Largefontsize;
}
}
//使用SASS
$baseFontsize: 14px
$Largefontsize: 16px
body
font-size: $baseFontsize
p
font-size: $Largefontsize
两种语法各有所长，也各有所爱。SCSS好在贴近CSS，SASS妙在简洁清爽，大家可以参考下这篇文章《Sass vs. SCSS: which syntax is better?》，至于你选择那种语法，就全在你了。# Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}上面的这段嵌套的代码编译过之后，将会是这样#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}编译之后的代码如下所示a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}将会被编译成#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red; }
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}编译出来之后.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }并且，命名空间属性还可以有一个值，像下面的代码一样.funky {
font: 2px/3px {
family: fantasy;
size: 30em;
weight: bold;
}
}编译之后.funky {
font: 2px/3px;
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won‘t appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }编译之后/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: green; }当注释的第一个字符为！时，注释将会插值的形式编译到css中，甚至在压缩输出时也是如此，这个特性对于在CSS中添加版权信息非常有用。
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------
原文：http://blog.csdn.net/whqet/article/details/20049375