CSS编译神器——SASS（SCSS）

前端的小伙伴们有福利啦！！！

         什么？听说！css样式还可以被编译执行了。学过前端的小伙伴都知道，css样式是用来修饰网页页面结构的，说白了，它压根就算不上一门编程语言，和js相比，css所能做的事可就弱爆了，（ajax和node的出现让js越来越靠近一门服务端编程语言）。在web1.0时代，css就是用来做页面模板的，纯属于设计类。不在开发的范畴......

CSS编译神器——SASS（SCSS）

           直到sass的出现，sass是个什么东西呢！上个世纪90年代有个日本佬开发出了一门名为Ruby的开发语言，它是一种服务端开发语言。这种语言出现之后的一段时间里，出现了不少围绕着ruby打转的框架，我们的sass就是其中之一，如此说来我们这个强大的css编译平台就是用ruby开发的，所以后面在开发编写sass文件时，我们需要安装ruby编译环境，然后安装ruby包gem中的sass模块，其实sass就像是css的虚拟机一样，它可以将强类型的css文件（后缀名是.sass或者.scss的css文件）编译成可以渲染页面的“正规”的css文件。厉害了，我的css. 以前只听过js的虚拟机——浏览器（或者node.js），java的虚拟机——jvm，安卓的虚拟机——dvm（和ART）.从来没听过小小的css现在也变得越来越强。等等，这么说来！以后前端写css就可以像js那样定义变量，函数，调用方法，定义数据类型，什么继承啊，封装啊都跑到css上面来了。这么说来，css也想一统武林，称霸编程语言排行版？这个......额..貌似不妥吧！......有待商榷......

煤矿大开发

题外话不多扯，下面就带大家走进SASS的门槛，门槛不高，君需仔细

          第一步：工欲善其事必先利其器，当然是编写sass时环境搭建了，首先需要去ruby的官网下载ruby安装包，网上一搜一大堆，这里我也给大家提供了百度云分享（密码:s3y2 ） Ruby安装包    

下载之后一步一步安装完成，接着安装ruby的包管理器gem中的一个重要的模块（美其名曰：sass的依赖环境）——sass-3.4.22.gem（这里只是某个版本）如何安装这个东东呢，如果你觉得你的网速够可以的话，那不多说，直接上DOS命令行:gem install sass

但是我们的网速慢的可以，那么也别急，在这里我也给大家提供了已经下载好的sass模块，点击大链接  http://pan.baidu.com/s/1o8HEZWI  下载即可，注意此时安装有些不一样，要在你命令行中敲入gem install (空格)之后再将你下载好的sass文件路径粘贴在此，最后敲下回车键，说白了，就是安装（install）你已经下载好的sass，而不需要在网速慢的情况下去国外服务器上下载模块（要是你懂得翻墙也是可以的噢）。以上两个东西装好之后，该检验了。在命令行中敲下ruby -v，出现版本号，对勾。敲下gem -v,出现版本号，对勾。

---

         第二步：环境搭建好了，那就开始我们的第一个Hello World“”吧

在你的目录下新建一个项目文件，在css文件夹里新建一个.scss文件（前面说过.scss和.sass都是SASS文件，二者的区别在于：.sass后缀名的是在SASS3.0之前的版本中使用的，其代码书写格式由于没有花括号和分号，而且需要做到完美的退格形式，所以不符合css书写规范而不被广为接受。 .scss后缀名的是SASS3.0之后一直很流行的格式，代码书写有花括号,分号等等，完全符合原生css格式）如图所示：

demo

你的.scss里就是你要写的css代码，只不过，这一次我们写的css有了变量，方法，赋值等等一大堆只有强类型语言才有的，你可以给css的属性（或属性值）定义成一个变量，然后对它赋值，在花括号里该怎样写·css还是怎样写

html页面的简单结构如下图

html

SASS页面（.scss后缀名的）如下图

SASS

你的小demo写完了嘛，好！关键的一步来啦

进入dos命令行cd到你的项目文件所在路径下，我的是sassdemo.然后敲下如下命令

演示：如下图

dos

接着你会在你的项目文件（sassdemo）里的css文件夹下看到多出来这3个文件（map文件也很重要哦）如下图

编译后的css结构

没错dos命令行里敲命令就将你写好的.scss文件编译成“正规”的css文件啦。编译后的css文件里内容这这样的，如下图

由.scss文件编译过来的css

好了，一个小小的SASS编译小案例结束了

总结：所谓的SASS就是另一种形式的css文件，只不过在这种形式的SASS（.scss常用）文件里，你可以将css扩展开来去写，可以将编程语言的语法运用到css中。一般，我们编译之后的.scss文件会形成4中格式的css文件

                                             expanded （扩展格式）——常用

                                             compact  （紧凑格式）——常用

                                              nested   （嵌套格式）——不常用

                                             compressed（压缩格式）——不常用（项目上线时用）

SASS编程里除了变量，有一个重要的内容——关于“函数”方面

           官方专业称其为：混合