我有以下 Sass 占位符,我想扩展它。
%btn
// ...button styling...
&[disabled], &.btn--disabled
color: red
.btn-primary
@extend %btn
CSS 输出如下所示:
[disabled].btn-primary, .btn--disabled.btn-primary{ color: red; }
当我想得到以下内容时:
.btn-primary[disabled], .btn-primary.btn--disabled { color: red; }
我不明白为什么输出顺序与指定的顺序不同。我该如何改变它?
我认为你所追求的是以下内容:
%btn[disabled], %btn.btn--disabled
color: red
.btn-primary
@extend %btn
为了帮助概念化生成的 CSS 的结构,请记住,%placeholder
是一个标记,它将替换为@extend
它的选择器。
编辑
实际上,这仍然输出
[disabled].btn-primary, .btn--disabled.btn-primary {
color: red; }
我没想到...在语法上,[disabled].btn-primary
与 .btn-primary[disabled]
相同,但很烦人的是,源排序没有得到尊重。
这是我发现的一个错误报告,描述了这种行为(显然,这就是@extend
的工作方式):
- 占位符选择器决定实际选择器的顺序,而不是实际选择器