vue开发--在vue中使用scss

1. 安装

npm install node-sass --save-dev
npm install sass-loader --save-dev

2. 用法

• 2.1 嵌套

#div {
  img{
      width: 200px;
  }
}
//编译为
#div img {
      width: 200px;
}

• 2.2 变量

$color: #000;
#div{
  background:$color; 
}
// 编译后
#div{
	background: #000;
}

• 2.3 @mixin混合器

@mixin divSyle($color: #000) {
    background:$color;
}

#div{
      @include divSyle()  
  }

// 编译为
#div{
    position: relative;
    background: #000;
}

• 2.4 @extend继承

.div1 {
    border: 1px solid #111;
}

.div2 {
    @extend .div1 ;
    background: #000;
}

//编译后
.div1 , div2 {
  border: 1px solid #111;
}

.div2 {
  background: #000;
}

• 2.5 用&添加hover的伪类

#div{
  p{
      &:hover {
            color: red;
        }
  }
}
//编译后：
#div p:hover { 
	color:red;
 }