4

すでに暗い場合は色を暗くし、明るい場合は明るくする関数/ミックスインを作成したい（正規化/極端化？）

プロパティ名（color、background-color、border-right-colorなど）を渡すことでこれを行うことはできますか？

.normalize(@color, @amount, @prop: "color") when (lightness(@color) >= 50%)
{
    @prop:lighten(@color, @amount);
}
.normalize(@color, @amount, @prop: "color") when (lightness(@color) < 50%)
{
    @prop:darken(@color, @amount);
}
4

4 に答える 4

11

これは現在、less.jsgithubの機能リクエストです。したがって、less.js 1.4でそれを探してください。それまでは、そのようにハックすることができます...

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

あまり良くありません、そしてあなたは余分な財産を手に入れます、しかしそれは現時点で唯一の方法です。

于 2012-05-22T04:08:03.397 に答える
2

ガードされたミックスインはあなたが探しているものでなければなりません、しかしあなたはプロパティを定義するために変数を使うことはできず、それらの値だけを使うことができます。したがって、次のように実行できます。

.normalize(@color, @amount) when (lightness(@color) >= 50%)
{
    color:lighten(@color, @amount);
}

.normalize(@color, @amount) when (lightness(@color) < 50%)
{
   color:darken(@color, @amount);
}

したがって、この：

.class1 {
    .normalize(#ddd, 10%);
}

これを出力します：

.class1 {
  color: #f7f7f7;
}

ただし、実際にはプロパティ名を変数として渡すことはできません。これは残念ながらLESSの制限であり、マージンの方向などについてはこれを回避する方法を見てきましたが、変数を使用して古いプロパティを渡す方法はありません。

于 2012-05-21T17:59:49.510 に答える
0

Less'GitHubの対応する問題には、cloudhaedによって提案された回避策があります。

.blah ()      { color: black }                 // All blahs
.blah(right)  { padding-right: 20px }          // Right blahs
.blah(left)   { padding-left: 20px }           // Left blahs

@side: left;
.class { .blah(@side) }

出力

.class { color: black; padding-left: 20px;}

多分これでいいの？

于 2014-08-07T08:06:58.627 に答える
0

この機能はv1.6.0以降に追加されました。

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

コンパイル先：

.widget {
  color: #0ee;
  background-color: #999;
}

http://lesscss.org/features/#variables-feature-propertiesを参照してください

于 2019-06-08T21:12:37.583 に答える