web-dev-qa-db-ja.com

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

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

@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)を、@color変数からrgba()値を生成するLess関数に置き換える必要があります。

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

cssless
121
chubbyk

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

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

アルファキーが必要ない場合は、色の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/

98
Sebastian Stiehl

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

.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
    }
}

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

編集：rgba background with IE filter alternative：IE9は両方をレンダリングします！、ミックスインへのいくつかの行。

12
helpse

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

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

それは私のために動作しますが、 公式ドキュメント で見つけることができません。

1
Dmitry Davydov