vue项目中预编译器的深入，用的变量转的

Question

官方给的有三个 >>> , /deep/ , ::v-deep, 后面两个都是预编译器中的用法。然后我之前用的一个变量转的，格式是：
这里面的 ~ 是css选择器的那个 ~ 的意思吗？下面的@{}包起来是什么意思呢。

@deep: ~'>>>';

@{deep} .keyword-lighten {
    color: #000;
}

Answer 1

作为选择器和属性名

1. 使用的时候将变量以 @{变量名} 的方式使用

   这里的选择器即是选择器也是属性名，譬如将 @mySelector:width的width
   换成 widths 就会报错，不识别，因为 css 里面没有 widths 这个属性;
   而 ~ 也是css选择器的意思。