Question

我有一个表格，每个输入都有一个标签：

<label>My Label</label>

我用它来设计：

label {
   &:before {
        background-color: red;
    }
}

我在每个标签上添加一个类：

<label class="blue">My Label</label>
<label class="yellow">My Label</label>

如何为Sass中的每个课程选择之前的课程？

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和clearfix

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a Mixin
.element {
  .clearfix();
}

Answer 2

你需要这样写：

label {
  &:before {
    background-color: red;
  }
  &.blue{
    background-color:blue;
  }
}

如果您使用的是版本，则会label:before.blue而不是您想要的label.blue

在Sass中选择一个班级

2 个答案: