我可以使用 SASS 中的 & 符号来引用父类的特定标签吗？ [复制]

Question

我有一个课程semantic，我将其应用于许多不同的元素。根据应用类的 html 标签，我希望它应用不同的样式。这就是我尝试这样做的方式：

.semantic {
    &ul {
        padding: 0;
        margin: 0;
    }
    &p {
        margin: 0;
    }
}

这不起作用。我当然可以这样写，但不会很“干”：

 .semantic ul {
    padding: 0;
    margin: 0;
 }

 .semantic p {
     margin: 0;
 }

这可能吗？

编辑：为澄清起见，以下是我的 HTML 的示例：

<ul class='semantic'>
    <li>An Item</li>
</ul>

<p class='semantic'>This text is semantically a paragraph, but should not be displayed as such</p>

Answer 1

在 Sass 3.4 上：

.semantic {
    @at-root {
      ul#{&} {
        padding: 0;
        margin: 0;
      }
      p#{&} {
        margin: 0;
      }
    }
}

生成：

ul.semantic {
  padding: 0;
  margin: 0;
}

p.semantic {
  margin: 0;
}

@at-root 将块移动到顶层。这有多种用途（参见链接），但在这里它被用来继续利用 & 语法，而不暗示这些规则是 .semantic 的子选择器。

Answer 2

理论上你想要的应该是这样的：

.semantic {
    ul& {
        padding: 0;
        margin: 0;
    }
    p& {
        margin: 0;
    }
}

这是不可能的，因为& 必须是第一个。你只需要处理它不是 DRY 的事实并用手写出来：

ul.semantic {
    padding: 0;
    margin: 0;
}

p.semantic {
    margin: 0;
}

从 Sass 3.3 或 3.4 开始，可以使用以下语法：

.semantic {
    ul#{&} {
        padding: 0;
        margin: 0;
    }
    p#{&} {
        margin: 0;
    }
}

Answer 3

由于 CSS 特定性的工作原理，您可以这样做：

.semantic {
  margin: 0; 
}

ul.semantic {
  padding: 0;
}

在您的 HTML 中，p.semantic 和 ul.semantic 将具有 margin: 0;，而只有 ul.semantic 将具有 padding: 0;

少 Sass，少 CSS。干燥。

如果与您的示例不同，真实站点上的元素的共同点更少，您可能需要重新考虑为什么它们需要具有相同的类名。