1

仕事用に作成しているアプリケーションに、カスタム ラジオ ボタン スプライトシートを使用しています。このスプライトシートを論理的に列と行に分割しました。列と行は、ラジオ ボタンが持つことができる特定の状態に対応しています。(列は無効などの状態と、「正しい」または「正しくない」などのアプリケーションの状態であり、行は選択された状態とホバー/フォーカスの状態です。

私の実装では、動的に追加されたセマンティック クラスを使用して、背景の位置に影響を与えます。そのため、ラジオボタンが「正しい」とマークされ、フォーカスがある場合、「正しい」CSS クラスが適用され、「フォーカス」クラスが適用され、それぞれ列と行の背景位置が呼び出されます。

これらのクラスには、現在background-position-xとbackground-position-yCSS 属性を使用しています。これらは IE と chrome では機能しますが、Firefox と Opera では機能しません。(これらの 2 つのプロパティは、どの CSS 仕様にも公式には含まれていません。) LESS プリプロセッサを使用しているので、x または y の値を動的に「継承」する LESS mixin を作成する方法があるかどうか知りたいです。 「背景位置」プロパティ。

疑似コードでは、次のようになります。

.my-background-mixin-x(@value) {
   background-position: @value + 'px', inherit; (inherit y-value)
}

.my-background-mixin-y(@value) {
   background-position: inherit, @value + 'px'; (inherit x-value)
}

(これは正確な構文ではありませんが、アイデアが伝わることを願っています。)

これはLESSで可能ですか？このように変数とターゲットプロパティをあまり保存できませんか?

ありがとう！

4

1 に答える 1

1

そのようにLESSinherit値を持つことはできず、background-positionそれ自体inheritはCSSカスケードの両方の値のみを持つことができます。考えられる「簡単な」解決策は次のコードだと思います。注：スプライトの位置がわからないため、ここで説明するために、次のことを想定しています。

  1. 列の幅は10ピクセルで、a）「ベース」画像、b）disabled 画像、c）.correct画像、d）.incorrect画像の順になっています。
  2. 行の高さは10ピクセルで、a）「ベース」画像、b）ホバーと.focus画像（私の例では同じです。実際の状況はわかりません）の順序です。
  3. 「ベース」と設定にまたはの値disabledは必要ありません。:hover.focus

これらの仮定を前提として、水平（X）と垂直（Y）のシフト量のミックスインを使用し、スプライトの列と行の位置に乗数を渡すと、このコードが得られます（変更できるはずです）。私の仮定が間違っていたような場所で）：

LESSコード

input[type=radio] {
   // bkg position set mixin
   .setBkgPos(@X: 0, @Y: 0) {
      @Xshift: -10px;
      @Yshift: -10px;
      background-position: (@Xshift * @X) (@Yshift * @Y);
   }
   .setBkgPos;

   &[disabled="disabled"] {
      .setBkgPos(1, 0);
   }    

   &.correct {
      .setBkgPos(2, 0);
      &:hover, &.focus {
         .setBkgPos(2, 1);
      }
   }

   &.incorrect {
      .setBkgPos(3, 0);
      &:hover, &.focus {
         .setBkgPos(3, 1);
      }
   }
}

CSS出力例

input[type=radio] {
  background-position: 0px 0px;
}
input[type=radio][disabled="disabled"] {
  background-position: -10px 0px;
}
input[type=radio].correct {
  background-position: -20px 0px;
}
input[type=radio].correct:hover,
input[type=radio].correct.focus {
  background-position: -20px -10px;
}
input[type=radio].incorrect {
  background-position: -30px 0px;
}
input[type=radio].incorrect:hover,
input[type=radio].incorrect.focus {
  background-position: -30px -10px;
}
于 2012-07-27T04:25:10.560 に答える