Vue2.0中SASS的使用

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由[Hampton Catlin]设计并由[Natalie Weizenbaum]开发的层叠样式表语言。^[2][3]在开发最初版本之后，Weizenbaum和[Chris Eppstein]继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

Sass是一个将脚本解析成CSS的[脚本语言]，即SassScript。Sass包括两套[语法]。最开始的语法叫做“缩进语法”，与[Haml]类似，使用[缩进]来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个区分开。

一、vue项目使用sass

1、安装依赖包

vue的webpack项目中需要安装上node-sass、sass-loader和style-loader，所以，在项目中，运行一遍：

npm i node-sass sass-loader style-loader -D

运行以上的命令之后，将在package.json文件中的“devDependencies”属性中看到对应的版本号。

2、配置loader

在项目中的build目录找到webpack.base.conf.js文件，在该文件module.export中的module.rules加入解释scss文件的loader，具体做法是，在数组中加入一个对象，对象的内容如下：

{
   test: /\.scss$/,

   loader: 'sass-loader!style-loader!css-loader',

}

3、指定语言为scss

在.vue文件的style标签中加 lang="scss"，写法如下：

4、导入文件

导入文件的关键字是import，在sass中可以导入sass文件,也可以导入css文件，省略文件名时，默认导入sass文件。导入时语法如下：

@import "xxx.sass"