vue脚手架中配置Sass的方法

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

兼容CSS
Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。

特性丰富
Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。

成熟
Sass已经经过其核心团队超过8年的精心打造。

行业认可
一次又一次地，行业把Sass作为首选CSS扩展语言。

社区庞大
数家科技企业和成百上千名开发者为Sass提供支持。

框架
有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。

我是在vue脚手架中安装的

1 安装

npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass

2 配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置

{ test: //.sass$/, loaders: ['style', 'css', 'sass']}// 不知道为什么我配置完就打包不了, 不配置就是好用的

3 在APP.vue中修改style标签

<style lang="scss">

4 使用

(1) 变量

1-1) 使用变量

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)

1-2) 变量声明

$back: red#app color: $back// 变量声明也分为全局变量和局部变量 // 这样也是好用的$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}//编译后.selected { border: 1px solid #F90;}

1-3) 变量命名

在sass中使用-和_其实是一样的 例如$link-color和$link_color其实指向的是同一个变量。

$link-color: blue;a { color: $link_color;}//编译后a { color: blue;}

(2) 嵌套css规则

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }

像这种情况，sass可以让你只写一遍，且使样式可读性更高。在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE }} /* 编译后 */#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }