sass的简单应用

　sass是一款css的预处理器，有着强大的语法和函数，和less相比，更加友好的变量命名，获得了很多程序员的喜爱。而sass现在支持完整的css3，也是程序员钟爱sass的原因

sass的安装

sass的安装有三种途径，命令行工具，独立的ruby模块以及作为一种框架插件

第一种安装和使用就像这样：

gem install sass

　　如果你使用的是windows操作系统，那么你还必须首先安装ruby

为了运行sass，你可以这样操作

sass input.scss output.css

　　并且你还可以监听磁盘

sass --watch input.scss:output.css

　　非常方便。

安装和使用不再做过多赘述，下面看看用sass的一个小例子

#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }

　　上面的是sass，看看它是怎样编译的

#main p {
color: #00ff00;
width: 97%;

.redbox {
background-color: #ff0000;
color: #000000;
}
}

　　是不是感觉很方便，很快捷呢？sass不再像以前使用css那样，而是有一个层级关系，这样更方便程序员思考该怎么样写结构。

#main {
width: 97%;

p, div {
font-size: 2em;
a { font-weight: bold; }
}

pre { font-size: 3em; }
}

　　更好的一个例子，我们看这个sass的结构，就知道p标签和div便签是作为id为main元素的后代，并且他们处于同级，一目了然，非常方便

编译后的结果：

#main {
width: 97%; }
#main p, #main div {
font-size: 2em; }
#main p a, #main div a {
font-weight: bold; }
#main pre {
font-size: 3em; }

　　

更多的例子

变量申明

$width: 5em;

　　

#main {
width: $width;
}

　　

#main {
$width: 5em !global;
width: $width;
}

#sidebar {
width: $width;
}

　　编译后的结果：

#main {
width: 5em;
}

#sidebar {
width: 5em;
}

　　太酷炫了，有木有。

sass的总得语法和形式和less差不多，如果掌握了less，相信sass肯定会很快掌握的