46

我有一门课程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>
4

3 回答 3

66

在 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.

于 2015-06-05T14:23:00.827 回答
28

你想要的理论上看起来像这样:

.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;
    }
}
于 2013-04-03T19:53:33.513 回答
0

由于 CSS 特殊性的工作原理,您可以这样做:

.semantic {
  margin: 0; 
}

ul.semantic {
  padding: 0;
}

在您的 HTML 中,p.semantic并且ul.semantic将拥有margin: 0;并且只会ul.semantic拥有padding: 0;

少 Sass,少 CSS。干燥。

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

于 2013-04-04T00:09:20.380 回答