如何在vue中使用Sass-Compass

一.背景知识
1.Sass是什么？
　　Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。
　　Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码，易于组织和维护。
　　SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。
　　Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

2.Compass是什么?
　　Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。官方网址：http://compass-style.org
二、安装

npm install normallize.css --save
npm install node-sass sass-loader --save-dev
npm install compass-mixins --save-dev

三、修改配置

exports.cssLoaders = function (options) {
   
  ...
  return {
   
    ...
    // 将sass和scss修改为如下
    sass: generateLoaders('sass', {
    indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
    scss: generateLoaders('sass', {
    includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
    ...
  }
}

四、compass组件模块

Browser Support
css3 css3命令模块
Helpers
Layout 布局模块
Reset 重置样式模块
typography 版式模块
utilities 工具类
具体使用：
例如：reset使用：

@import “compass/reset”;
这样就会在css中生成重置样式了，不用我们再自己定义重置样式了。

css3使用：

@import “compass/css3”;
这是个绝对好用的特性，我们知道由于浏览器对css3支持的差异性，我们很多时候需要写一堆针对不同浏览器前缀样式，着实很烦人，css3命令模块帮我们解决了这个问题，我们只需include相应样式定义即可，compass会自动为我们生成针对不同浏览器的样式定义：

　@import "compass/css3";
　　.circle {
   
　　　　@include border-radius(5px); 　　} 

其他案例请看官方网站
五、Sass 基础语法

1.变量操作
  >1.直接操作变量,即变量表达式;
  >2.通过函数;
    >>1.跟代码块无关的函数,多是自己内置函数,称为functions;
    >>2.可重用的代码块:称为mixin;
      >>>1.@include;                // 以复制/拷贝的方式存在;
      >>>2.@extend;                 // 以组合声明的方式存在;

2.颜色值转换;
  Sass:
    color:hsl(270,100%,50%);