19

LESScss はすべての rgba 色を 16 進数値に変換しますか?

以前に定義した色変数を渡すことができる mixin、たとえば .color を作成しようとしていますが、それを rgba にしたいと考えています。

これは機能しませんが、アイデアは次のとおりです。

.bgcolor(@colorvariable,@alpha) {
     background-color: @colorvariable + rgba(0, 0, 0, @alpha);
     }

どこ@colorvariableにあるでしょう、@blue: rgb(17,55,76);または@green: rgb(125,188,83);など。

.bgcolorこれらの変数の束を定義してから、それらをor .colormixinに渡し、その場でアルファ透明度を変更できるようにしたいと考えています。

これは可能だと思いますが、何かが欠けています。-現在、入力内容に関係なく、コードは 16 進カラー値のみを出力します。- @alpha 値 1 を渡すと、16 進カラー値が出力されます。@alpha 値が 1 未満の場合にのみ、ブラウザーに rgba 値を強制的に表示させます。それで解決です。

さて、事前定義された変数とは別に、rgb とパーツを渡すにはどうすればよいでしょうか?

4

3 に答える 3

26

結局のところ、lessにはhsla関数が組み込まれています（less color関数を参照）。それで、いくつかの助けを借りて、これが私たちが発見したものです：

    @dkblue: #11374c;
    .colorize_bg(@color: @white, @alpha: 1) {
           background: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

次に、ミックスインを使用します。

section {.colorize_bg(@dkblue,1);}

そのため、色相、彩度、明度の値を取得および取得するなど、色変数@dkblueとlessの関数を渡します。次に、そのミックスインで定義したアルファを渡すことができます。hue(@color)@dkblue

次に、透明な境界線を定義するなど、他の方法で使用できます。追加background-clip: padding-box;する.colorize_bgことで、境界線がbgボックスの色の外側に表示されるようにします（CSS3は魔法ではありませんか？）次に、境界線の色で機能するようにミックスインを再定義できます。

    .colorize_border(@color: @white, @alpha: 1) {border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

次にsection、ミックスインを使用して境界線の幅、スタイル、および色を定義します。

section {border-width: 0 10px; border-style: solid; .colorize_border(@dkblue, .5);

そして、あなたはそのように魔法の、光沢のある透明な境界線を手に入れるでしょう：http: //i.stack.imgur.com/4jSKR.png

于 2011-03-03T05:03:06.003 に答える
19

LESS には、fade、fadeIn、またはfadeOut色に対する関数のセットがあります。これらの mixin (hsl、rgb、rgba、hex など) には任意の色を渡すことができるはずです。

// fade color to 40%
color: fade(#000000, 40);

// fade in color by 10%
color: fadeIn(rgba(0, 0, 0, .5), 10);

// fade out color by 10%
color: fadeOut(rgba(0, 0, 0, .5), 10);
于 2012-08-15T11:28:18.323 に答える
8

hsla に変換する必要もないので、白い値は必要ありません

.hexBackgroundToRGBA(@color,@alpha){
  @myred:red(@color);
  @mygreen:green(@color);
  @myblue:blue(@color);
  background-color: @color;
  background-color: rgba(@myred,@mygreen,@myblue,@alpha);
}

background-color プロパティ セット以外のものを設定するために、これらの mixin のいくつかを記述する必要がありますが、それがアイデアです。次のように呼び出します。

#selector{  .hexBackgroundToRGBA(@gray, 0.8); }

これは、@gray 変数にある色の値を取り、rgba() をサポートしていないブラウザー用に無地のフォールバックを使用して、80% の透明度でクロス ブラウザー ソリューションを出力します。

于 2013-02-02T22:22:34.897 に答える