vue2.0项目中使用sass(含sass基础用法示例)

Sass是一种CSS扩展语言，目前广泛地应用到web项目开发中，使用sass可以用更少的代码去实现CSS同样的样式效果，在书写上也更为简洁，其原理是通过一定的规则转化为对应的CSS样式，可以说是样式中的“高级语言”。Sass在日常的开发中，是需要通过转换工具转成CSS再引入到HTML文件中，然而，在vue的webpack项目模板中，引入解释sass文件的loader，即可使用sass。本文将展示vue项目使用sass的关键步骤和sass的常用语法使用。

一、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"，写法如下：

通过以上的步骤就可以在项目中使用sass。

二、sass的基本使用

1、变量的使用

sass中的一个核心就是使用变量，变量的使用总结有以下几点：

（1）以$开头声明变量

         例：声明一个错误信息的颜色值

（2）变量具有作用域的。

（3）变量中连接符中划线和下划线是互通的。

        例：

上面最终color值为red。

2、样式嵌套

sass中的嵌套规则可以减少很多代码的书写，形式是在外层选择器中，嵌入其后代的选择器，例如：在CSS中的div p {}，在sass的形式是div{ p {} }，最终sass编译出的css是div p {}，在复杂的多层样式下，显然用sass会方便很多，举例：

用sass实现：

用css实现：

由此可见，用sass会方便很多。

这种嵌套的规则，也可以应用于伪类，在sass用“&”指代了外层的选择器，例如在a标签中，添加hover的效果：

3、混入样式

混入样式的关键字是mixin和include，这是一个强大的功能，可以类似于函数一般复用代码并通过参数个性化，例如，有一个通用的边框样式：

以上在类名为test的元素中加入了定义好的边框样式。

使用参数则可以是：

以上是默认边框颜色是#ccc，在使用box-border时不传入颜色将默认为#ccc，上面传入了一个值为red的颜色值，则最终的颜色值为red。

4、样式继承

样式继承的关键字是extend，使用继承可以把已写好的样式，给其它选择器复用，用继承实现上面的例子：

上面是一个简单例子，只为说明继承的作用，在.test中继承了.test-border，最终会拷贝.test-border的样式到.test中。

5、导入文件

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

@import "xxx.sass"

三、总结

sass可以使书写样式代码更方便快捷，所以建议在项目中使用，本文列举了在vue项目中使用的关键步骤，并用简单的示例演示了sass的基础使用，要了解sass更详尽的用法和特性，建议到官网上查看文档。