Sass 无法 @extend 使用父选择器创建的选择器答案

【问题标题】：Sass fails to @extend selectors created with the parent selectorSass 无法 @extend 使用父选择器创建的选择器
【发布时间】：2016-06-09 23:50:09
【问题描述】：

我需要以某种方式使用 SCSS 和占位符创建 CSS 输出

这是我想要的输出

.myclass {
  color: silver;
}
.myclass-gold {
  color: gold;
}

当我用这样的SCSS placeholder 尝试这个时

%placeholder {
  color: silver;
  #{&}-gold {
    color: gold;
  }
}

.myclass {
  @extend %placeholder !optional;
}

我只得到这个结果

.myclass {
  color: silver;
}

黄金部分完全掉了。

我需要一个占位符，因为我使用了很多选择器，例如 a.myclass、input.myclass 等，并且不希望这些选择器中的 @export 爆炸

如果我不使用占位符，而是使用随机选择器——并取一些 extry 字节——输出也不正确

ae739ab7 {
  color: silver;
  #{&}-gold {
    color: gold;
  }
}

.myclass {
  @extend ae739ab7 !optional;
}

产量

ae739ab7, .myclass {
  color: silver;
}
ae739ab7 ae739ab7-gold, .myclass ae739ab7-gold {
  color: gold;
}

和

ae739ab7 {
  color: silver;
  &-gold {
    color: gold;
  }
}

.myclass {
  @extend ae739ab7 !optional;
}

给我

ae739ab7, .myclass {
  color: silver;
}
ae739ab7-gold {
  color: gold;
}

这里缺少的总是选择器.myclass-gold

这是否可以通过某种魔术以某种方式实现？

【问题讨论】：

标签： sass extend

【解决方案1】：

扩展仅适用于完全匹配。当你写这个时：

%placeholder {
  color: silver;
  #{&}-gold {
    color: gold;
  }
}

你真正创造的是这样的：

%placeholder {
  color: silver;
}

%placeholder %placeholder-gold {
  color: gold;
}

所以当你写这个时：

.myclass {
  @extend %placeholder !optional;
}

它只会扩展%placeholder 选择器而不是%placeholder-gold 选择器。要获得您正在寻找的行为，您必须单独扩展每个占位符选择器：

%placeholder {
  color: silver;
  @at-root #{&}-gold {
    color: gold;
  }
}

@mixin placeholder {
    & {
        @extend %placeholder;
        @at-root #{&}-gold {
            @extend %placeholder-gold;
        }
    }
}

.myclass {
  @include placeholder;
}

输出：

.myclass {
  color: silver;
}
.myclass-gold {
  color: gold;
}

【讨论】：

我从没想过在 mixin 中使用 extend。