Sass扩展和父选择器

时间:2013-09-12 11:35:59

标签: css sass

我有以下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; }

我不明白为什么输出顺序与指定顺序不一样。我怎么能改变它?

1 个答案:

答案 0 :(得分:4)

我认为您所追求的是以下内容:

%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的工作方式):