SCSS中如何使用&选择器简化多类组合选择器写法及Vuetify按钮样式自定义

嘿，这个问题问到点子上了！其实你设想的简化写法是完全可行的，我来给你拆解清楚SCSS里&选择器在这种多类场景下的用法：

首先，先明确SCSS中&的核心作用：它会精确替换为当前父选择器的完整内容。在你的代码里，父选择器是.v-btn，所以我们可以利用这一点来简化多类选择器的写法。

你的简化写法是有效的！ #

你尝试的这个写法：

.v-btn {
  text-transform: initial;
  &.&--disabled.&--has-bg {
    background-color: rgba(0,0,0,.6) !important;
    color: var(--v-text-light-base) !important;
  }
}

编译后会生成你需要的目标选择器：

.v-btn {
  text-transform: initial;
}
.v-btn.v-btn--disabled.v-btn--has-bg {
  background-color: rgba(0,0,0,.6) !important;
  color: var(--v-text-light-base) !important;
}

完全匹配同时拥有.v-btn、.v-btn--disabled和.v-btn--has-bg三个类的按钮元素，和你原来的写法效果一模一样，而且避免了重复写.v-btn。

为什么这个写法能生效？ #

这里的每个&都会被替换成父选择器.v-btn：

• &--disabled → 替换后是.v-btn--disabled（把&换成.v-btn再拼接后缀）
• &.&--disabled → 拼接后就是.v-btn.v-btn--disabled（同一元素的多类选择器）
• 再加.&--has-bg就扩展成.v-btn.v-btn--disabled.v-btn--has-bg，完美满足你的需求。

额外优化小技巧 #

如果你觉得&.&--的写法有点啰嗦，还可以用SCSS变量进一步简化（不过用&已经很直观了）：

$btn-prefix: '.v-btn';

#{$btn-prefix} {
  text-transform: initial;
  #{$btn-prefix}.#{$btn-prefix}--disabled.#{$btn-prefix}--has-bg {
    background-color: rgba(0,0,0,.6) !important;
    color: var(--v-text-light-base) !important;
  }
}

不过个人更推荐用&的写法，更符合SCSS嵌套的语义。

关于Vuetify样式优先级的小提醒 #

你用!important来覆盖Vuetify内置样式是可行的，但如果能避免的话，建议通过提高选择器特异性来覆盖，比如给按钮的父容器加一个自定义类：

.custom-btn-container .v-btn {
  text-transform: initial;
  &.&--disabled.&--has-bg {
    background-color: rgba(0,0,0,.6);
    color: var(--v-text-light-base);
  }
}

这样不需要!important就能覆盖默认样式，更符合CSS的最佳实践。

内容的提问来源于stack exchange，提问作者Freestyle09