时间戳

首页 > 解决方案 > 从具有串联元素的类扩展

html - 从具有串联元素的类扩展

问题描述

我目前开始认真地使用 sass，但我还很菜鸟。我想知道如何以简单的方式将这些样式扩展到另一个类。

我有这种风格

.active-state + label {
    font-size: 70%;
    padding: 0.8rem 2rem;
  }

并且想要扩展它，正好在另一个地方（同一个文件）。因为如果我这样做：

.another-class{
    @extend .active-state;
}

不起作用。

我需要做一个mixin并将它包含在两个类中还是有办法避免这种情况？

标签： htmlcsssass

解决方案

您不能扩展嵌套选择器，但是作为一种解决方法，您可以使用占位符选择器并对其进行扩展：

%myStyles {
   font-size: 70%;
   padding: 0.8rem 2rem; 
}

.active-state + label {
   @extend %myStyles;
}

.another-class {
   @extend %myStyles;
}

它将编译为：

.active-state + label, .another-class {
  font-size: 70%;
  padding: 0.8rem 2rem;
}

推荐阅读