html - 可以嵌套在 & :before using SASS? 中

Question

尝试使用 sass 定位 Sprite :CodePen Link .我想展示每张卡片，但我只能使用 &:before 方法获得签证。我不能在 &:before 中嵌套 .visa/.mastercard/.amex 吗？

<div class="saved_cc_block">
   <div class="saved_cc">
        <a class="cc_img visa"></a>
   </div>

   <div class="saved_cc">
        <a class="cc_img mastercard"></a>
   </div>
</div>

.cc_img {
  position: relative;
  height: 26px;
  left: 9px;
  padding-left: 50px;

  &:before {
    content: "";
    position: absolute;
    width: 41px;
    height: 26px;
    top: 50%;
    left: 0;
    background: url('http://i.imgur.com/3zRD5fn.png') no-repeat;

        .visa {
            background-position: 0;
        }
        .mastercard {
            background-position: -51px 0;
        }
        .amex {
            background-position: -102px 0;
        }
   }
}

Answer 1

:before 是伪元素，不能在其中嵌套其他元素。我想你可能想像这样构建你的 css:

.cc_img {
    position: relative;
    height: 26px;
    left: 9px;
    padding-left: 50px;

    &:before {
        content: "";
        position: absolute;
        width: 41px;
        height: 26px;
        top: 50%;
        left: 0;
        background: url('http://i.imgur.com/3zRD5fn.png') no-repeat;
    }
}

.visa:before {
    background-position: 0;
}
.mastercard:before {
    background-position: -51px 0;
}
.amex:before {
    background-position: -102px 0;
}