为何使用Sass

 

做为前端（html、javascript、css）的三大马车之一的css，一直以静态语言存在，HTML5火遍大江南北了、javascript因为NODE.JS而成为目前先后端统一开发语言的不二之选。只有css彷佛成为前端开发的被忽视的角色了。

Sass让css有了动态语言的特色，在初次学习css时，有时候一样的样式在不一样的#或.中一次又一次重复的编码，有了Sass，在css语法的基础上不只能够写变量、函数，并且能够百分百的转换为标准的css。再次把Don‘t Repeat Yourself进行到底，下降了“码农”的工做量，提升了效率。并且如今愈来愈多的优秀开发人员专门利用sass和compass构建出很是优秀的前端样式开发框架（如，Button），再一次提升咱们的生产力。

准备条件

在安装和使用sass以前，须要一些准备条件：

1. 文件夹---存放.scss 或 .sass；

2. 编辑器，咱们推荐使用Sublime Text 2 或者 3；

3. 你的电脑须要安装Ruby，由于sass是依赖于Ruby的。在windows须要本身手动下载Ruby的。

安装Sass

使用命令行安装sass：

gem install sass

使用命令，查看是否安装成功，以下显示表示安装成功：

$ sass -v Sass 3.3.8 (Maptastic Maple)

简单使用Sass

在sass文件夹下建立demo1.scss文件，内容：

$myColor: #ccc; #page { color: $myColor; }

使用命令行：

sass demo1.scss demo1.css

会在同一个文件夹下生成一个demo1.css文件，内容：

#page { color: #cccccc; }

提升生产力的Sass

以下，在学习sass以前咱们大概都是这么来写css的：

ul.nav {float: right} ul.nav li {float: left;} ul.nav li a {color: #111} ul.nav li.current {font-weight: bold;}

但，有了sass后，那就方便多了：

ul.nav {  float: right; li {  float: left; a {  color: #111; } &.current { font-weight: bold; } } }

经过编译，获得css：

ul.nav { float: right; } ul.nav li { float: left; } ul.nav li a { color: #111; } ul.nav li.current { font-weight: bold; }

除了排版不同以外，再也看不出有什么区别。但使用sass写出来的样式结构，不只井井有条，意思明确，并且编码量明显减小。

转自：http://www.yemeishu.com/%E5%AD%A6%E4%B9%A0sass%E4%B9%8B%E5%AE%89%E8%A3%85sass%EF%BC%88%E4%B8%80%EF%BC%89/