近两个月在用ionic2+angualr2搭了一个商城。其中用到了scss，恍然悟道，scss或者less这样的语言，才是css（层叠样式表）的未来。通过这个项目我已经感受到了scss的魅力，很遗憾之前的坐井观天，总觉得scss嘛，和css没多大的区别（我的锅我的锅）。

所以说，前段界跟喜剧界有一个很大的共同点，就是：段子（框架or插件）天天有。

我们都是在前段这个大的河流中随着浪潮荡着，这头浪高（vue），冲到这头（vue）；那头浪高（angualr1/2/4）；被冲到那头（angualr1/2/4）；或者是react的浪潮，这些年来都是这么荡着。想想都t特么好被动。

前段如卵垒城，不得半点马虎。所以记录自己的在scss方面的心得，以及一些函数，混合宏。

---

1.分享几个网站（有用）

sass中文网

http://sass.bootcss.com

阮一峰（国内sass的布道者）的scss用法指南

http://www.ruanyifeng.com/blog/2012/06/sass.html

一个在线scss编译网站

http://www.sassmeister.com

---

2.安装sass

sass是依赖着Ruby的。

首先安装你的Ruby。

地址：安装Ruby。

默认是全局安装，不牵扯类似node -g之类的指令。

安装完成后在DOS中键入==>ruby -v

出现版本号就表示安装成功了。

接下来就可进行下一步操作了。在DOS中键入ｇｅｍ　ｉｎｓｔａｌｌ　ｓａｓｓ

然后就是 ==> sass -v

出现版本号就表示安装成功了。

此时已经成功了。但是还是要操作一波。

新建一个文件夹。新建你的scss文件。

第一个scss文件

接下来就可以写一些scss代码。

当然在写scss之前，我们新建一个html文件。命名为：index.html。

在我们的scss文件中就要对这个box进行操作

上scss。

简单写一点。

接下来就是执行编译指令。打开文件所在目录；shift+右键（打开黑窗）；

因为我的scss文件叫做a.scss。所以：

如上指令。

完事之后你会看见你的根目录写多了几个文件，不用管。如下说明成功了。

我们需要的就是a.css

打开a.css如下。

编译后的css文件内容

接下来我们将a.css联入index.html中。如下效果说明成功了。

ok

sass提供了4中编译方式：

* nested：嵌套缩进的css代码，它是默认值。

* expanded：没有缩进的、扩展的css代码。

* compact：简洁格式的css代码。

* compressed：压缩后的css代码。

一般就是compressed最为常用

键入如上指令，我们来看看我的压缩后的css文件

压缩后的css文件如下：

变成了一行

写的很乱。逻辑顺序是没有错的。

使用gulp也是可编译的。下次有时间整理一下gulp

一是做个记录。二是可以给前段的兄弟一点点帮助。