【sass】css预处理器 sass 的一些基本用法

前言：sass在做项目时，或多或少会用到，有一些用法和 stylus 类似，但是又有一些有区别的地方。

1、样式穿透  /deep/，在stylus中是 >>>

作用：就是当组件样式（scoped）时，在一个组件下去修改另一个组件的样式。

.popupbox {
  /deep/ .van-sku__goods-price {
    color: #2982b1;
  }
}

2、嵌套

.div .text{color:red;}

可以写成

.div{

    .text{

          color:red;

    }

}

属性也可以嵌套(background-size，注意background后面必须加 ：)

background:{

    size:{

          100% auto;

    }

}

引用 &，例如 a:hover 可以写成

a{
    color:red;
    &:hover{
       color:blue;    
    }
}

3、变量 以$开头 ，如果变量要写在字符串中，要用 #{变量}包裹

$bgColor = blue； $turn = left;

.box{color:$bgColor;}

border-#{$turn}-radius:5px;