css - 在 Sass 中选择一个类

Question

我有一个表单，每个输入都有一个标签:

<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 选择器的原因是为了比更改标签背景颜色更复杂的事情，我只是用它作为一个简单的例子。

Answer 1

这里有几种编写 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();
}