sass总结

1. 基本语法

变量声明: $highlight-color: #F90;

$nav-color: #F90;
nav{
    $width: 100px;
    width: $width;
    color: $nav-color
}
// 编译后
nav {
  width: 100px;
  color: #F90;
}
复制代码

混合器

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
// 使用
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
// sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
复制代码

2. 一些sass中可能出现的问题的解决办法

1. /deep/报错的解决办法

有时候， 我们需要去手动改变ui框架内部的样式。 这时候， 可以使用>>>或/deep/。 而/deep/有时会报错，>>>不好使。 估计跟loader本身依赖的版本有关系。 这时候， 如果不想进行麻烦的配置， 可以试下::v-deep。