Sass中如何将&符号（嵌套语法）与属性选择器结合使用？

完全可以用Sass嵌套语法实现禁用状态的样式，你写的代码只差一个小修正：属性选择器[disabled]不需要加冒号，把&:[disabled]改成&[disabled]即可。

正确的Sass嵌套代码 #

.class {
  color: blue;
  &:hover {
    color: grey;
  }
  &[disabled] {
    color: red;
  }
}

这段代码编译后的CSS输出如下，和你第二种非嵌套写法的结果完全一致：

.class {
  color: blue;
}
.class:hover {
  color: grey;
}
.class[disabled] {
  color: red;
}

它能正确匹配你提供的带有disabled="true"属性的DOM元素，实现禁用状态下文字变为红色的效果。

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