Question

尝试使用sass来定位精灵：CodePen Link。我想要每张卡片展示，但我只能使用＆amp;：before方法获得签证。我不能在。＆amp;前面嵌入.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;
}

Answer 2

不，你不能。

具有这些类名的元素是cc_img div的子元素，而不是在它之前出现的生成的伪元素。 Psuedo-elements不能有子节点。

看看在链接之前而不是在div之前生成psuedo-element。

在使用SASS之前可以在＆amp;内嵌套吗？

2 个答案: