2017-05-08 7 views
1

私はCSS calc()式を含むLESS変数を持ち、この変数を別のcalc()式の中で使用したいと思います。 CSS仕様ではネストされたcalc()式を使用できますが、すべてのブラウザがこれをサポートしているわけではありません(IE/Edge)。LESS CSSを使ってcalc()をマージします

ネストされたcalc()式は本質的に実用的ではないので(プリプロセッサ変数を使用する副作用です)、LESSを使用して1つの式にマージすることは可能でしょうか。これに代えて

calc(50px + (5rem/10px)) 

@var1: ~"calc(5rem/10px)"; 
@var2: ~"calc(50px + "@var1~")"; 

にコンパイルするには、次の例により、

は、私はこれが欲しい

calc(50px + calc(5rem/10px)) 
+1

は、ありません、以下が特に後(calc'事がある 'というものの絶対にないアイデアを持っていませんあなたはそれを '〜" ''に入れます)。これは、変数の値としてそのような 'calc'式を持たない理由です。あなたは 'clean-css'を使うことができます。私が間違っていなければ、もっと積極的なオプションの下で' calc'を余分に動かすべきです。 –

答えて

0

生成します。

子供 calc()式が他の変数が含まれている場合、彼らは補間されたときに、それだけで動作すること

注:要するに

@var1: 5rem; 
@var2: ~"calc(@{var1}/10px)"; 
@var3: ~"calc(50px + "replace(@var2, "calc", "")~")"; 
0

あなたは、潜在的に二つに最初のVARを分割してもらえますか?例えば:

@var1a: 5rem/10px; 
@var1: calc(@var1a); 

  • @var2a: ~"calc(50px + "@var1~")";calc(50px + calc(0.5rem))
  • @var2b: ~"calc(50px + @{var1a})";生産は、私がLESS replace()機能を使用して "汚いトリック" のようなものを発見したcalc(50px + 0.5rem)
+0

私はあなたがここで達成しようとしていることを実際には得ていません。内部のcalc()式を評価する必要はありません。私はそれを親の表現の一部にしたい。それを1つにマージします。 –

関連する問題