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

在萨斯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;
    }
}