LESS ミックスインでは、パーセンテージ (xx%) として指定されていても、単純な数値 (0.xx) に変換したいアルファ値があります。数値をパーセンテージに変換する percent() 関数を見つけましたが、percent(xx%) は「xx00%」を返し、100 で割ると 0.xx が 0.00xx になり、これも良くありません。LESS で見つけることができるすべての「if-then」ステートメントは、新しいスコープの作成に関与しているため、「%」は検出できましたが、その情報を変数に戻して使用することはできませんでした。
パーセンテージである場合にのみ、パーセンテージを数値に変換するにはどうすればよいですか?
Less 内で JS を使用して目的の効果を達成することもできますが、組み込み関数ispercentage()とisnumber()型関数を使用して、変数値が数値またはパーセンテージであるか、またはそのどちらでもないかを確認し、それに応じて値を出力することをお勧めします。
.percentlike(@var) {
& when (ispercentage(@var)){ /* is input value a percentage */
alpha: unit(@var / 100); /* unit() strips the % symbol */
/* you could also use the replace function like below
@percentage: @var / 100;
alpha: replace(~"@{percentage}", "%", "");
*/
}
& when not (ispercentage(@var)) and (isnumber(@var)){ /* not percentage but is a number */
alpha: @var;
}
& when not (ispercentage(@var)) and not (isnumber(@var)){ /* neither */
alpha: ~"NaN";
}
}
div#div1 {
.percentlike(20%);
}
div#div2{
.percentlike(0.2);
}
div#div3{
.percentlike(a);
}
コンパイル済み CSS:
div#div1 {
alpha: 0.2;
}
div#div2 {
alpha: 0.2;
}
div#div3 {
alpha: NaN;
}
まあ、それはエンドランですが、解決策を見つけました。バックティックを使用して、LESS で任意の JS を実行できるので、...
.percentlike(@var1, @var2) {
-percent-property: ~`"@{var1}".match(/%$/) ? parseFloat("@{var1}") / 100 : parseFloat("@{var1}")`;
-decimal-property: ~`"@{var2}".match(/%$/) ? parseFloat("@{var2}") / 100 : parseFloat("@{var2}")`;
}
div {
.percentlike(20%, 0.2);
}
これは、必要に応じて...
div {
-percent-property: 0.2;
-decimal-property: 0.2;
}
これを試してください: replace(~"@{value}", '%', '');