尝试使用 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;
}
}
}
最佳答案
: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;
}
关于html - 可以嵌套在 & :before using SASS? 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25067826/