我有一个表单,每个输入都有一个标签:
<label>My Label</label>
我的风格是:
label {
&:before {
background-color: red;
}
}
我为每个标签添加一个类:
<label class="blue">My Label</label>
<label class="yellow">My Label</label>
如何在 Sass 中为每个类选择 before?
label {
&:before {
background-color: red;
&.blue {
background-color: blue; //???????
}
}
}
请注意,我使用 ::before
选择器的原因是为了比更改标签背景颜色更复杂的事情,我只是用它作为一个简单的例子。
最佳答案
这里有几种编写 SASS 的方法,它们将生成 label:before
、label.blue:before
、label.yellow:before
label {
&:before{
background-color:red;
}
&.blue:before{
background-color: blue;
}
&.yellow:before{
background-color:yellow;
}
}
label {
&:before{
background-color:red;
}
&.blue{
&:before{
background-color: blue;
}
}
&.yellow{
&:before{
background-color:yellow;
}
}
}
一般来说,伪元素需要放在选择器的末尾,并且本身没有类。 Sass 会在你写的时候渲染它。我不确定浏览器会做什么。
伪元素通常也有一个content
属性,就是应用样式的。除非在您的 css 中的其他地方设置了“content”属性,否则不会应用上面的 css。
通过对 ::before
和 ::after
的操作,您可以在 bootstrap 中找到标准的 clearfix
解决方案[ http://getbootstrap.com/css/#helper-classes-clearfix]
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a Mixin
.element {
.clearfix();
}
关于css - 在 Sass 中选择一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26001207/