7

コンパスを使用してスプライト画像を生成しています。そして、私は多くのスプライトアイコンを持っていて、それはあまりにも多くのCSSコードを生成しています（背景画像のクラスセレクターが多すぎます）。それでは、コンパススプライトコードを分析しましょう。

あなたがここで見ることができるようにhttp://compass-style.org/help/tutorials/spriting/ 

@import "my-icons/*.png";
@include all-my-icons-sprites;

生成されます：

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

あなたが私がこのように使うのを見たら：<div class="my-icons-sprite my-icons-delete"></div>

Compassにこのコードを生成させたい：

.my-icons-sprite { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

それ以外の場合は、新しい画像ごとに、背景と背景の位置が追加されます。セレクターが多すぎます。

そのための構成はありますか？

ありがとう

4

5 に答える 5

8

コンパス用にこのスニペットを試しましたか？

$icons: sprite-map("icons/*.png");

i{
    background: $icons;
    display: inline-block; // or block
}

@each $i in sprite_names($icons){
    .icn-#{$i}{
        background-position: sprite-position($icons, $i);
        @include sprite-dimensions($icons, $i);
    }
}

この例では、icons-folder内の個別の.png-filesのファイル名と組み合わせ<i></i>たプレフィックスを含むクラスで-tagを使用します。icn-このような：

<i class="icn-delete"></i>

生成されたCSSは次のようになります。

i {
    background: url('/path/to/generated/spritemap/my-icons-xxxxxxxxxxx.png');
    display: inline-block;
}
.icn-delete {
     background-position: 0 0;
     height: 32px; // assuming the width is 32px
     width: 32px; // assuming the height is 32px
}
.icn-edit{
     background-position: 0 -32px;
     height: 32px; // assuming the width is 32px
     width: 32px; // assuming the height is 32px
}
.icn-new {
     background-position: 0 -64px;
     height: 32px; // assuming the width is 32px
     width: 32px; // assuming the height is 32px
}
...
..
.

それでも、これをCompassのMagicSelectorsと組み合わせて使用​​する方法を完全には理解していません。

マジックセレクターは、さまざまな状態（：hover、：active、：target）が必要な場合に非常にうまく機能します。ファイルにfilename_state.png（delete_hover.png、delete_active.pngなど）のように名前を付けるだけです。次に、CompassのMagic Selectorsは、：hover、：active、および：target（delete：hover、delete_hover、delete-hover）のcssを自動的に生成します。このようにして、状態変化をどのように表現するかを自由に選択できます。

私の最初の例で、ホバー/アクティブ状態の接尾辞が付いたファイル名がある場合、スニペットは次のようなCSSのみを書き込みます。

.icn-edit_hover {
    background-position: -32px -32px;
    height: 32px;
    width: 32px;
}

私は本当にこれを印刷してもらいたいです：

.icn-edit:hover, .icn-edit_hover, .icn-edit-hover{
    background-position: 0 -32px;
    height: 32px;
    width: 32px;
}

従来のコンパスのマジックセレクターのように。何か案が？

于 2013-01-14T14:51:53.670 に答える
4

私の意見では、両方の長所（HTMLとCSSが少ない）は、このコード（画像の属性セレクターを使用）を使用することであるように思われます。

HTML

<div class="my-icons-delete"></div>

CSS

[class^="my-icons-"] { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

残念ながら、Compassをそのようにエクスポートする方法がわかりません。ただし、バックエンドの静的cssを構築するだけでなく、動的にCompassを使用している場合を除き、生成されたコンパスを変更するだけで済みます。

于 2012-05-15T02:12:40.560 に答える
1

ScottSの質問への答えを探している人のために。ベースクラスで始まるものにcssセレクターを使用するにはどうすればよいですか？

これを試してください：http： //codepen.io/Acts7/pen/nwsEb

以下のコードを貼り付けています。

spriteGenミックスインには2つのパラメーターが必要です1）使用するベースクラス（ScottSの場合--- "myicons" 2）2番目のパラメーターはフォルダーの場所です

また、「。」を忘れないでください。＃{$mySpriteBaseClass}の前。それ以外の場合は、>> myicons-home_icon {background-position：...}を取得します（クラス名セレクターの場合は..に注意してください）

// _custom.scss
// ---------------------------------------------------------
//  Sprite Generation
    --------------------- */
    @include spriteGen('sprites','sprites');

// _mixins.scss
// ---------------------------------------------------------
// Sprite Generation Mixin with options
@mixin spriteGen($mySpriteBaseClass:'.spritebc',$mySpriteFolder:'sprites'){
    $mySprites:$mySpriteFolder + "/*.png";
    $spritefoldername-map: sprite-map($mySprites,
        $spacing: 10px, 
        $layout: vertical
    );
    //  if using base class as starter for sprite name class
    [class^="#{$mySpriteBaseClass}"]{
    /*//    if using a separate base class
    .#{$mySpriteBaseClass}{*/
        //      TODO: 
        //      Add if/else to set width globally 
        //      or let spriting assign it per each
        //width: 48px;
        //height: 48px;
        display: inline-block;
        vertical-align: middle;
        background: $spritefoldername-map no-repeat;
    }

    @each $sprite in sprite_names($spritefoldername-map) {
        //  if using sprite base class as prefix to full sprite class name
        .#{$mySpriteBaseClass}-#{$sprite} {
        /*//    if using separate base class and sprite name class
        .#{$sprite} {*/
            background-position: sprite-position($spritefoldername-map, $sprite);
            @include sprite-dimensions($spritefoldername-map, $sprite);
        }
    }
}
于 2013-11-01T18:48:21.997 に答える
0

現在の出力の何が問題になっていますか？すでにmy-icons-delete/edit / new / saveのみを割り当てることができます。これは十分に意味論的です-それはすでにアイコンであり、削除アイコンであると言っています。

于 2012-06-03T17:40:40.663 に答える
0

これは私が現在行っていることですが、Sass3.3が必要です。

$icons: sprite-map('icons/*.png');

.icon {
    background: $icons;
    display: inline-block;
    vertical-align: middle;
}

@each $i in sprite_names($icons) {

    $underscore: str-index($i, _);

    @if ($underscore < 1) {
        .icon--#{$i} {
            background-position: sprite-position($icons, $i);
            @include sprite-dimensions($icons, $i);
        }
    } @else {
        $prefix: str-slice($i, 0, $underscore - 1);
        $postfix: str-slice($i, $underscore + 1);

        .icon--#{$prefix}:#{$postfix} {
            background-position: sprite-position($icons, $i);
        }
    }

}

ここではBEMを使用しているので、このよう<i class="icon icon--star></i>に使用することを前提としています。したがって、「star.png」と「star_hover.png」の画像がある場合は.icon--star、.icon--star:hoverクラス名が生成されます。

于 2014-01-03T04:27:31.710 に答える