Sass扩展和父选择器 [英] Sass extend and parent selector

问题描述

我有以下Sass占位符，我想延长它。

 ％btn 
 // .button styleing ... 
& [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] 相同，但是令人烦恼的是源顺序不受尊重。 / p>

这里有一个bug报告，我发现描述这个行为（显然，它只是 @extend 的工作原理） p>

• 占位符选择器决定实际的选择器顺序，而不是实际的选择器

I have the following Sass placeholder and I want to extend it.

%btn
  // ...button styling...
  &[disabled], &.btn--disabled
    color: red

.btn-primary
  @extend %btn

The CSS output is the following:

 [disabled].btn-primary, .btn--disabled.btn-primary{ color: red; }

When I'd like to get the following:

 .btn-primary[disabled], .btn-primary.btn--disabled { color: red; }

I don't get why the output order is not the same as the specified one. How can I change that?

解决方案

I think what you're after is the following:

%btn[disabled], %btn.btn--disabled
    color: red

.btn-primary
    @extend %btn

To help conceptualize what the structure will be for the CSS that's generated, just remember that %placeholder is a token that's going to be substituted with the selector that's @extending it.

Edit

Actually, this still outputs

[disabled].btn-primary, .btn--disabled.btn-primary {
    color: red; }

which I wouldn't expect... Syntactically, [disabled].btn-primary is the same as .btn-primary[disabled], but it's annoying that the source ordering isn't being respected.

Here's a bug report I found that describes this behaviour (apparently, it's just how @extend works):

• placeholder-selectors decide on the actual selector's order, not the actual selectors

这篇关于Sass扩展和父选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！