4

自動スプライトクラスを生成しました

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

import と include は魔法のように次のようなクラスを生成します:

.icons-application_go {
  background-position: 0 -16px;
}

(icons/application_go.png ファイルに対応)

ただし、結果のクラスが次のようになるように、スプライトを含める必要があります

.x-btn-icon.icons-application_go {
  background-position: 0 -16px;
}

.x-btn-icon.icons-delete {
  background-position: 0 0;
}

私はやろうとした

.x-btn-icon {
  @include all-icons-sprites;
}

しかし、それは

.x-btn-icon .icons-application_go {
  background-position: 0 -16px;
}

.x-btn-icon .icons-delete {
  background-position: 0 0;
}

そのため、.x-btn-icon の子を選択しますが、class="x-btn-icon icons-delete" の要素は選択しません

今、私は持っています

.x-btn-icon.icons-add { @include icons-sprite(add); }

私のSASSで。しかし、すべてのアイテムに対してこれを手動で行う必要があります。このセットには正確に 1000 個のアイコンがあるので、これは面倒です :-)

すべてのアイコン名 (「追加」など) をループして出力する方法はありますか

.x-btn-icon.icons-$foo { @include icons-sprite($foo); }

?

@cram1010からの提案に従って、私も試しました

@import "icons/*.png";
$icons-sprite-base-class: "&.icons-";

.x-btn-icon {
  @include all-icons-sprites;
}

しかし、次のエラーが発生しました。

Invalid CSS after "": expected selector, was "&.icons-"
  (in /Users/pasc/projects/bss-io-demo/vendor/gems/bss-io-app/app/assets/stylesheets/bss.io.app.css.scss)
4

1 に答える 1

4

以下の作品。重要なのは、親のセレクターを参照することです。

サス:

@mixin all-icons-sprites {
  &.icons-application_go {
    background-position: 0 -16px;
  }
  &.icons-delete {
    background-position: 0 0;
  }
}

.x-btn-icon {
  @include all-icons-sprites;
}

次の CSS にコンパイルされます。

.x-btn-icon.icons-application_go {
  background-position: 0 -16px;
}

.x-btn-icon.icons-delete {
  background-position: 0 0;
}

更新 1

ミックスインが自動的に生成されるため、質問を誤解しているようです。

$<map>-sprite-base-class コンパスのスプライトのオプションを変更しようとしたので、参照する親セレクターが含まれ&ますか?

$icons-sprite-base-class: "&.icons-";

更新 2

コメントについては、コンパスのソース コードの関係でできないようです。そのため、新しいバグを Compass チームに報告する必要があります: github.com/chriseppstein/compass/issues

于 2012-04-18T21:57:47.943 に答える