Lessコンパイラーで16進数の色をRGBAに変換するにはどうすればよいですか？

131

私は次のコードを持っています：

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

に変換@colorする必要がありrgba(209, 72, 54, 1)ます。

したがってrgba(209, 72, 54, 1)、コードrgba()から@color変数から値を生成するLess関数に置き換える必要があります。

Lessでこれを行うにはどうすればよいですか？

css less

— チャビーク
ソース

3

フェードイン/フェードアウト/フェード機能は、必要な機能を果たしていませんか？ lesscss.org/#reference

— cimmanon

348

実際、Less言語にはという関数が組み込まれていますfade。カラーオブジェクトと絶対不透明度％を渡します（値が高いほど透明度が低くなります）：

fade(@color, 50%);   // Return @color with 50% opacity in rgba

— ロナルド・パウファート
ソース

42

@SocがOPの質問に回答しましたが、EVERYONE ELSEがここに来て見つけに答えてくれました！ありがとうございました！

— BillyNair 2014年

1

量パラメーターは透明度レベルではないと思いますが、逆に不透明度レベルを指定していますか？

— mousio

2

@mousio実際には、正確50%に選択することで、透明度と不透明度の両方が正しくなります。:)

— Dem Pilafian、2015年

1

あなたが本当に技術的な取得したい場合@mousio、私はそれがより正確要素のオーバーレイは、各ピクセルの色とのブレンドに「半透明」カラーの割合だと考えている-を参照してen.wikipedia.org/wiki/Alpha_compositing#Alpha_blendingを：）しかし、実際には、もちろんあなたは正しい。パーセンテージまたは小数値は、透明度ではなく不透明度を表します。

— ブライアンレイシー2015

5

記録としては、これはAPIの欠陥です。使いたい度に調べないといけない。SASSが行うようなrgba（@colorValue、.5）のように既存のRGBAをLESS呼び出しにシュガーして、実際のCSS rgba宣言とまったく同じhingを出力するのは賢明です。しかし、ねえ、それは私が愚か者であることです。:)

— dudewad

105

アルファキーが必要ない場合は、色の16進数表現を使用できます。アルファが「1」のrgba色は、16進数値と同じです。

以下に、その例をいくつか示します。

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

このコードをオンラインでテストします：http : //lesstester.com/

— セバスチャン・スティール
ソース

私が得たこのエラーはどうですか？error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto 2013

これはしばらく更新されていませんが、PHPが少ないと次のエラーが発生します-

@colorGold: color('#C6AF87');  .box {         background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }

エラーは-CSSファイルをコンパイルできませんでした（screen.less）：red（）に期待される色： `background-color：rgba（赤（@colorGold）、緑（@colorGold）、青（@colorGold）、0.3）;

— クリス・

1

@Chrisあなたは色を直接割り当ててこれをLess PHPで動作させることができますが、現在のLessバージョンでも動作するようですので、私は例を採用しました。@colorGold: #C6AF87;

— Sebastian Stiehl、2013年

@Socこれが私の最終的な解決策でしたが、何が私にそれをカラータグでラップする必要があるという印象を与えたのかわからない後すぐに、私はそれを見つけました！

— クリス、

私の少ない機能をチェックしてください、stackoverflow.com

— questions / 14860874 /…–helpes

12

私の少ないミックスイン：

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

それを試してみてください。

編集：IEフィルターの代替を使用したrgbaの背景で見られるように：IE9は両方をレンダリングします！、私はミックスインにいくつかの行を追加しました。

— 助けて
ソース

2

最近のLessアップデート3.81では、rgba（）関数で引数を2つだけ使用できるようです。

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

それは私にとってはうまくいきますが、公式のドキュメントでは見つかりません。

— ドミトリー・ダビドフ
ソース