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肯定会很快掌握的