2

mixin パラメーターを解析し、rgba関数を使用して色が提供されたとします。

ここで、これらの色の 2 つを混合したいと思いますが、LESSmix関数には type のパラメーター インスタンスが必要colorです。

私が試したこと

...そして機能しません

  1. 呼び出しcolor("rgba(0,0,0,.5)")
  2. mix(@first, ~"@{second}")@secondのような文字列はどこですかrgba(0,0,0,0.5)

色に変換するにはどうすればよいですか?

4

1 に答える 1

2

残念ながら、LESS でこれを行うための組み込み関数が見つからないでしょう。

functions 引数はcolor()、16 進数またはその簡略表現である必要があります。

ただし、javascriptを使用して文字列をさらに解析して、

  • 個々の r、g、b およびアルファ値を抽出し、
  • 個々の値をrgba()関数に渡して、タイプ color の変数を取得します。

元の解析の最初のステップを実行できます。すべて LESS で行う必要がある場合は、次のようにすることができます。

  @color1: "rgba(255, 255, 0, 0.5)";
  @color2: ~`@{color1}.replace(/^(rgb|rgba)\(/,'[').replace(/\)$/,']').replace(/\s/g,'')`;
  @color3: rgba(unit(`@{color2}[0]`),unit(`@{color2}[1]`),unit(`@{color2}[2]`),unit(`@{color2}[3]`));

rgba()残念ながら、複数の引数が必要なため、文字列を または同様の関数に直接読み込むことはできません。文字列エスケープ (例: ~) を使用しても、出力は単一の変数としてフォーマットされます ( css の単一の出力文字列に~"a, b, c"なり、そのように機能します)。そのため、各値を個別に取得して、関数a, b, cのそれぞれの引数/変数に渡す必要があります。 rgba(). 関数unit()を使用して、文字列をさらに使用できる数値に変換します。

例えば：

  @color4: mix(red,@color3);
  .test {
      color: @color4;
  }

CSSの結果:

  .test{
    color: rgba(255, 64, 0, 0.75);
  }
于 2013-03-30T00:58:58.753 に答える