Question

我试图用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{}

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

Answer 1

尝试[class^="bullet"][class$="-top"]:before {}。我不确定如何在相同的html标签上做多个选择器，但值得一试。更多关于选择器here。如果这不起作用，请尝试将'[class ^ =“bullet”]＆gt; [class $ =“ - top”]：放在'。

之前。

编辑：我做了一个基本测试，我最初说的内容与this example中注释掉的内容相同。

在SCSS中做精灵的最佳方法？

1 个答案: