我可以在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。 DRY。

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

Answer 4

目前还不清楚你有什么HTML结构。

如果是这样的话：

<div class="semantic">
  <p>...</p>
  <ul>...</ul>
</div>

...然后你需要像.semantic ul和.semantic p这样的课程。这是一个合适的SCSS：

.semantic {

    & ul {
        padding: 0;
        margin:  0; }

    & p {
        margin:  0; } }

如果HTML结构如下：

<p class="semantic">...</p>
<ul class="semantic">...</ul>

...然后你需要像.semantic ul和.semantic p这样的课程。你应该听书本。这是他干燥建议的一个时髦版本：

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

p.semantic {
  margin:  0; }