在vue中使用scss

假设你已经用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; }

文档： https://www.sass.hk/guide/