css预处理器sass安装（浅谈sass系列一）

概念：什么是预处理器

css预处理器就是将css这个语言变成像js一样有变量、有函数的一种工具，目的就是让代码更加灵活，更加DRY。
是不是突然发现这个预处理器还挺重要的，但是我们不能为了用预处理器而用预处理器。
预处理器的弊端：css的文件体积和复杂度不可控、调试难度增加、成本。

安装：安装sass

说明：为什么要使用sass呐，因为他是最成熟最好用滴。
普通安装
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

step1：假定你已经安装好了Ruby，接着在命令行输入下面的命令：

　gem install sass

step2 : 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css

以上的安装方式并没有亲自测试过，只是借鉴别人的文章中的方法。重点想要说说下面的安装方法。
vue中使用(安装)sass
step1:安装sass依赖包。
假定你已经创建好vue的项目了。接下来就直接安装sass的依赖包。

npm install --save-dev node-sass
//sass-loader依赖于node-sass,接下来安装sass-loader
npm install --save-dev sass-loader

到这里安装步骤已经结束，接下来就是使用
step2:使用
使用方式很简单，在style标签下面配置一下就好了

<style lang="sass">

注意： sass的语法不使用大括号和分号。使用缩进来确定代码的层次关系。
想要保证正常情况下的css语法不报错，将sass改为scss即可。
具体的语法使用方式在下面的文章中进行的讲解。