0

我试图用 sass 让我的生活更轻松，但似乎我太菜鸟了......

我想简化我使用子弹的方式.....通常是这样的：D

//The Sprite 

@mixin sprite($pos: null){
@if $pos ==  null {
    background:url('img/assets/sprite-all.png') 0 0 no-repeat;
}

@else {
    background:url('img/assets/sprite-all.png') $pos no-repeat;

}
}

//The CSS // Bullets
    .bullet1-left:before,
    .bullet2-left:before,
    .bullet3-left:before,
    .bullet4-left:before,
    .bullet5-left:before,
    .bullet6-left:before,
    .bullet7-left:before,
    .bullet8-left:before,
    .bullet1-top:before,
    .bullet2-top:before,
    .bullet3-top:before,
    .bullet4-top:before,
    .bullet5-top:before,
    .bullet6-top:before,
    .bullet7-top:before,
    .bullet8-top:before{
      @include sprite;
      width:64px;
      height:65px;
      content:"";
    }

    .bullet1-left:before,
    .bullet2-left:before,
    .bullet3-left:before,
    .bullet4-left:before,
    .bullet5-left:before,
    .bullet6-left:before,
    .bullet7-left:before,
    .bullet8-left:before{
      float:left;
      padding:0 10px;
      margin:0;
      display:inline-block;
    }

    .bullet1-top:before,
    .bullet2-top:before,
    .bullet3-top:before,
    .bullet4-top:before,
    .bullet5-top:before,
    .bullet6-top:before,
    .bullet7-top:before,
    .bullet8-top:before{
      display:block;
      padding:10px 0;
      margin: 0 auto;  
    }

    .bullet1-left:before{}
    .bullet2-left:before{}
    .bullet3-left:before{}
    .bullet4-left:before{}
    .bullet5-left:before{}
    .bullet6-left:before{}
    .bullet7-left:before{}
    .bullet8-left:before{}

    .bullet1-top:before{}
    .bullet2-top:before{}
    .bullet3-top:before{}
    .bullet4-top:before{}
    .bullet5-top:before{}
    .bullet6-top:before{}
    .bullet7-top:before{}
    .bullet8-top:before{}

简化这一切的最佳方法是什么？？？，有人可以帮我解决这个问题吗

4

1 回答 1

0

试试[class^="bullet"][class$="-top"]:before {}。我不确定如何在同一个 html 标记上执行多个选择器，但值得一试。更多关于选择器的信息。如果这不起作用，请尝试使用 `[class^="bullet"]>[class$="-top"]:before'。

编辑：我做了一个基本的测试，我最初说的和这个例子中注释掉的部分一样。

于 2012-06-15T15:51:46.893 回答