3

私はこれに対する良い解決策を見つけるのに苦労しています.コンパスのページには私が知る限り何もありません.

問題: 引き戸スタイルの css 背景。

垂直スタイルシートを使用すると、背景スプライト用に両側に何もない画像を取得できます。

ヘッダーの左側には、次のようにスプライトを含めるだけです。

    @include header-plain-blue-left;
// will give me
  background-position: 0 -903px;

次に、compass が CSS を生成し、完全に適合します。問題は右側にあります。私が望むのは、スプライトを要素の右側に揃えることです。私が見る限り、コンパスはこれを許可していません。

望ましい出力は次のとおりです。

  background-position: right -903px;

私がそれを機能させているのは、ミックスインを作成し、背景のファイル名と位置を具体的に宣言することだけです:

@mixin header-plain-blue-right {
     background: url(../images/sprites-s2ba933e4ea.png) no-repeat right -346px;
     }

これは面倒で、あまり生意気ではありません...

これを行うためにコンパスを取得する方法を知っている人はいますか? 明らかな何かが欠けていますか？または、プラグインを知っている人はいますか？

または、どの画像を最初にマップに追加するか (したがって、スプライトマップ内の順序) を制御する方法があれば、追加がずっと簡単になる可能性があります...

4

2 に答える 2

2

*更新: 誤報。これは Firefox では機能しません。だから駄目です。*

だから、あまりにも長い間。これを行う非常に簡単な方法に気づきました。私が早く手に入れなかったとは信じられません。

この問題を抱えている他の人のために。それは本当に*あまりにも*簡単です。

@include header-plain-blue-left;
background-position-x: right;

その単純な css ルールは、コンパスによって生成された x の位置をオーバーライドします。また、おまけとして、スプライトマップに対して相対的にスプライトを配置する必要がある場合 (オフセット)、コンパスにはそのための機能もあります。

     @include <folder>-sprite-position(<sprite>, $offset_x, $offset_y)

誰かが少なくともこれが役立つことを願っています!

于 2012-11-14T16:22:25.253 に答える
0

以下は、すべてのブラウザで機能します

@include sprite-background-position($sprite, tab, 100%, 0);

100% 値は、「右」配置と同じです。

于 2014-03-28T16:17:44.640 に答える