前言：

前两天打算清理电脑的时候，遇到了一点特殊的问题，打算重装一些东西，其中就有我一直用的顺手的SASS预编译工具。 但是在重装的时候，我发现我居然不会用了？？？ 靠，要不是我用了半年的Sass,我真以为我这个垃圾的切图仔用了个假的sass。 这里整理一下安装的过程，排除掉安装中遇到的坑，同时也细数一下sass的用法和好处，如有不足之处，欢迎指正和留言；

当然，如果要看更准确的，欢迎直接：www.sass.hk/install/

以下仅仅是我个人的整理笔记，为了改掉我早期不爱写笔记的坏毛病。

这些内容是基于我自己的理解，整理出的模式，目的是为了交流和回忆，这些都是留给我以后填坑用的，如果要是有兴趣，欢迎指正。

---

安装过程

下载准备：

这里放上ruby：www.ruby-lang.org/en/download… 有能力的朋友可以直接用命令行下，这时候的我还不太会命令行工具。。

安装ruby环境：

Q：肯定有人会问，这里为什么要先装ruby这个东西，这是什么东西？

A:这里稍微解释一下，这个一个编程工具，sass就是基于ruby编译出来的一个工具，至于他有什么好处，有什么特殊的地方，这些你统统不要了解，他的存在就是为sass提供一个运行环境而已；

安装sass文件：

我是window系统，所以，打开CMD命令行，然后什么都不要做，直接输入以下命令：

gem  install sass
复制代码

完成后：

题外话：

安装的方式并非是绝对我这一种，但是目前这是我自己试过最稳妥的方式，如果你用过nodejs的话，那么可以走node路径下载，有了vpn的话，甚至比我这种方式还快；

---

Sass的优点：

• 可以计算：

• 变量定义：

• 嵌套写法：

• 继承用法：

个人观点： 以上基本上是我在sass使用过程中最直观的感受，尤其是嵌套和继承，这两个可能新人刚开始用的时候，会觉得不是那么好用，但是用久了，你就会发现，这真是好用，比起CSS那种重复写法真是省事太多了； 可以计算还有定义变量这两种用法，也相当好用，毕竟很多时候，我是真的懒得去一个个改页面中的那些数据；

---

Sass的编译风格:

这一段引用自blog.csdn.net/u013034014/…。

早期对官方那种较为死板的说明方式很是不喜，所以错过了官方那种明白的教程，走了很长时间的弯路。

弯路走了很多，不过，最终应该也是走到了正路上了，靠着这篇博客，我也算是把SASS最后这段弯路给补全了吧。。。。

希望各位新人在学习的时候，尽可能的多看各种官方文档，毕竟，没有比官方文档更正确的了。。

因为每个前端工程师编写代码的风格都不太一样，所以Sass的编译也非常人性化的提供了不同风格的编译方式，主要分为4种

• 嵌套输出 nested
• 展开输出 expanded
• 紧凑输出 compact
• 压缩输出 compressed

肯定有人疑惑，这四种方式到底是什么意思，后边的英文又是做什么的，那么，话不多说，直接进入正题吧。

CSS源码：

nav {  ul {  margin: 0;  padding: 0;  list-style: none;  }  li { display: inline-block; }  a {  display: block;  padding: 6px 12px;  text-decoration: none;  }  
} 
复制代码

1.嵌套输出 nested:

nav ul {  margin: 0;  padding: 0;  list-style: none; }  
nav li {  display: inline-block; }  
nav a {  display: block;  padding: 6px 12px;  text-decoration: none; } 
复制代码

这是默认的风格，我一开始不知道怎么调的时候，很是伤脑筋，总觉得这个默认风格特别傻，并不是特别好用。

2.展开输出 expanded：

nav ul {  margin: 0;  padding: 0;  list-style: none;  
}  
nav li {  display: inline-block;  
}  
nav a {  display: block;  padding: 6px 12px;  text-decoration: none;  
}  
复制代码

这是我以前傻写CSS常用的编写方式，看着非常舒服和习惯，如果要是预编译给我自己看的话，我用的就是这种方式。

3.紧凑输出 compact

nav ul { margin: 0; padding: 0; list-style: none; }  
nav li { display: inline-block; }  
nav a { display: block; padding: 6px 12px; text-decoration: none; }  
复制代码

这个也就是所谓的单行CSS格式啦，还是有不少人喜欢这个风格的。。话说，这种傻屌的用法真的不怕自己眼睛不够用吗。。。我真的是觉得这个用法比较瞎眼。。。

4.压缩输出 compressed：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}  
复制代码

也就是变成了压缩之后的CSS代码，去掉了所有的空格和换行。如果是特别巨大的页面工程，推荐使用这个编码风格。

这里稍微解释一下，为什么说这种风格适合大的页面工程：

首先，空行和空格，这两样在CSS样式中，在载入渲染的时候，会占有一定的资源的。

也许，这在简单的页面没有什么感觉。但是，对于那种上万行CSS样式的项目来说，这就很要命了，就算一个空行消耗的时间可以忽略，那上万行下来的时间傻子也能看出来不对劲。

所以，这样压缩便有了以下的优势：

• 1、减小了文件的体积
• 2、减小了网络传输量和带宽占用
• 3、减小了服务器的处理的压力
• 4、提高了页面的渲染显示的速度

---

Sass四种编译风格的实现方法：

首先，先说明一点，实现的方式并非只有一种，但是在经历了koala的崩盘后，我对外部工具已经不是很信任了，也许这些可视化工具让sass编译的过程显得很轻松易懂，但是一旦出了问题，可就不是那么轻松易懂了，所以我个人推荐还是用命令行来编辑，还是命令行这玩意靠谱。。

所以，以下只介绍一种编译方式：命令行编译，其余的方式自行上官网了解吧。SASS中文网：www.sass.hk/install/

还有之前那位大佬的博客，这里也贴一下：blog.csdn.net/u013034014/…

固有格式

sass --watch SASS文件名.scss:想要的CSS文件名.css --style 四种方式中你想要的输出风格
复制代码

以压缩编译为例：

sass --watch style1.scss:style1.css --style compressed
复制代码

好吧，其实很简单，就是在原来编译指令的后面加了 --style 输出风格

所以只要依据需求，把compact,compressed这样的参数写在--style后面就行

结语：

以上就是对SASS的梳理了，用了这么就，对于SASS的使用，还是略有一点心得的，说起来惭愧，这么长时间了，这恐怕是我唯一用的熟手的东西了。

但是这段时间在见识了各路大佬那恐怖的学习速度后，我不认为我这点熟手的东西有什么值得自豪的，也许只是一两天就能弄明白的东西吧。

如果我上边说的有什么不对的地方，还请指教，最后，在这里谢过了。