假设你已经用vue-cli初始化好了一个vue项目，并成功运行出默认的欢迎页面：
TIM截图20181122141126.png
然后安装 node-sass和sass-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
如果出现错误，可以尝试使用淘宝镜像安装解决：
npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）
然后使用cnpm 代替npm 安装node-sass和sass-loader。
安装好之后就可以在你的.vue文件中使用了：
首先在<style>标签中加入scss:
<style lang="scss"></style>
下面列举一些比较常用的东西：
假设模板如下：
<template>
<div id="app">
<img src="./assets/logo.png">
<p>hello</p>
<div class="test1"></div>
<div class="test2"></div>
</div>
</template>
1、变量
用$定义变量
$app-background: #d00;
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
background:$app-background; //可以直接引用
}
假如你的变量定义在了一个scss文件中，用import引入即可
@import './style/variables'
2、@mixin混合器
@mixin divStyle($backgroundColor: #0d0) {
position: relative;
margin:0 auto;
width: 100px;
height:100px;
background:$backgroundColor;
}
.test1{
@include divStyle()
}
用@include引用，有默认值时可以不传值；
编译为：
.test1 {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
background: #0d0;
}
3、@extend继承
.test1 {
border: 1px solid #333;
}
.test2 {
@extend .test1;
background-color: #999;
}
//编译后
.test1, test2 {
border: 1px solid #333;
}
.test2 {
background-color: #999;
}
4、属性嵌套也时必用的啊，可以这样写：
#app {
img{
width: 200px;
}
}
//编译为
#app img {
width: 200px;
}
如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符。
#app {
p{
font-size: 16px;
&:hover {
color: #999;
}
}
}
//编译后：
#app p {font-size: 16px; }
#app p:hover { color: #999; }
