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 に答える