4

以下を回避するにはどうすればよいですか？

.prefix(@rule, @prop) {
  -webkit-@{rule}: @{prop};
  -moz-@{rule}: @{prop};
  -o-@{rule}: @{prop};
  -ms-@{rule}: @{prop};
  @{rule}: @{prop};
}

私はさまざまな方法を試しました。それを~"stuff"ラップし、変数をラップし@{var}、'sをバックスラッシュし-ます...成功しませんでした！

編集： Githubにはプルリクエストがあります：https ：//github.com/cloudhead/less.js/pull/698

4

3 に答える 3

7

LESS 1.6+ の更新

元の計画は、LESS 1.6 アップデートでほぼ機能します。必要な構文は次のとおりです。

以下

.prefix(@rule, @prop) {
  -webkit-@{rule}: @prop;
  -moz-@{rule}: @prop;
  -o-@{rule}: @prop;
  -ms-@{rule}: @prop;
  @{rule}: @prop;
}

.test {
  .prefix(box-sizing, border-box);
}

CSS出力

.test {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

それにもかかわらず、プロパティ値の他の前処理に関する私の最初の答えはまだ有効です。

元の回答（1.6より前）

LESS では動的プロパティを使用できません (もちろん、SASS では使用できると思います)。

ただし、代わりにパターン マッチングを LESS に使用あることは完全に悪いことではありません。パターン マッチングに必要となる可能性のある違いを熟考し、それらの違いをコードに組み込む必要があるからです。

以下を例に取ります。これには 2 つの変数が必要で、(現時点では) 他に 2 つの変数 (ここでは、背景画像のグラデーション) を使用できます。必要に応じて、追加の変数を許可するように拡張できます。

ネストされた各 mixin が、2 番目以降の変数に異なるタイプのものが渡されることをどのように期待しているかに注意してください。それぞれが異なる方法でそれらの変数を前処理できます。以下の例ではopacity、 を 10 進値または数値整数のいずれかとして渡すことができます (ただし、 の値は110 進値1.0(つまり 100%) ではない0.01ものと見なされます。これpaddingはbox-sizingプロパティで許可されますが、mozilla 以外の場合は除外されます)。 (このページによれば、他のブラウザーではサポートされていません) したがって、各プロパティが必要とする可能性のあるものを「考える」ことが有益であり、それぞれに異なるパターン マッチ ミックスインを設定する必要があることが価値があることがわかります。

以下

.prefix(@prop, @v1, @v2:~'', @v3:~'') {
  .prop(opacity) {
    @decValue: `(@{v1} > 1 ? @{v1}/100 : @{v1})`;
    @intValue: `(@{v1} <= 1 ? @{v1}*100 : @{v1})`;
    filter: alpha(opacity=@intValue);
    -webkit-opacity: @decValue;
    -moz-opacity: @decValue;
    opacity: @decValue;
  }
  .prop(boxSize) {
    @filteredSupport: ~`("@{v1}" == "padding" ? "border" : "@{v1}")`;
    -webkit-box-sizing: (~"@{filteredSupport}-box");
    -moz-box-sizing: (~"@{v1}-box"); 
    box-sizing: (~"@{filteredSupport}-box");
  }
  .prop(bkgGradient) {
    .filterFirstTwoArgs(@type, @color, @gradient) {
      background-color: @color; 
      background-image: ~"-webkit-@{type}-gradient(@{gradient})";
      background-image: ~"   -moz-@{type}-gradient(@{gradient})";
      background-image: ~"    -ms-@{type}-gradient(@{gradient})";
      background-image: ~"     -o-@{type}-gradient(@{gradient})";
      background-image: ~"        @{type}-gradient(@{gradient})";
    }
    .filterFirstTwoArgs(@v1, @v2, @v3);
  }
  .prop(@prop);
}

これを使って：

.myClass {
  .prefix(opacity, 10);
  .prefix(boxSize, padding);
  .prefix(bkgGradient, linear, #F07575, "top, hsl(0, 80%, 70%), #bada55"); 
}

CSS出力

.myClass {
  filter: alpha(opacity=10);
  -webkit-opacity: 0.1;
  -moz-opacity: 0.1;
  opacity: 0.1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  background-color: #f07575;
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:         linear-gradient(top, hsl(0, 80%, 70%), #bada55);
}

ここにある例から取得したグラデーション出力の例。

于 2013-02-18T19:15:10.537 に答える
4

試したばかりでうまくいったことを共有したかっただけです...動的に作成されたベンダープロパティを（文字列補間を使用して）別のプロパティ値に挿入します。

.vendors(@property, @value) {
    -inj:~"ect; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}

これはハックなソリューションですが、動作する css にコンパイルされます (前に追加のプロパティが 1 つ挿入されています) ... less2css.org で試してみました

私はこの質問に答えてそれについてもう少し書きました。これはほぼ正確な複製です:

LESS でのプロパティ名での変数の使用 (動的プロパティ/プロパティ名補間)

編集: あるクラスの動的に生成されたプロパティを次のクラスの名前に挿入する、より洗練されたソリューションを見つけました。繰り返しの質問への回答の例で方法を示します。このようにして、追加の不要なプロパティを生成しません。

于 2013-03-15T22:37:34.717 に答える
2

「マイナス」をプロパティ名として使用できることを追加したかっただけで、パーサーはそれを無視しますが、残りの文字列を追加します。そうすれば、空inject:;または inj プロパティを取得できなくなります。それはまだハッキーですが、ねえ... :)

.prefix(@property, @value) {
    -:~";-webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}

例：

.prefix(transition, "all .2s, color 0s");

出力します:

-webkit-transition: all .2s, color 0;
-moz-transition: all .2s, color 0;
-ms-transition: all .2s, color 0;
-o-transition: all .2s, color 0;
transition: all .2s, color 0;
于 2013-06-10T03:42:20.167 に答える