LESS変数のアルファ不透明度を変更する


171

LESSを使用すると、色変数の彩度または色合いを変更できることがわかります。これは次のようになります。

background: lighten(@blue, 20%);

ただし、色のアルファ不透明度を変更したいのですが。できればこのように:

background: alpha(@blue, 20%);

LESSでこれを行う簡単な方法はありますか?

回答:


303

サイトのドキュメントには、答えを与えます:

background: fade(@blue, 20%);

関数名がそのドキュメントに一致してfadeいませんalpha


ありがとう!すべてをRGBAに変換するのに飽きてきました!
BillyNair 2013年

私は暗くて明るくなるものを探していました..ドキュメントがそこに行きました。ありがとう

1
「フェード」は正確ではないようだ。Sassはそれを正しく行います:alpha()、opacity()、rgba()。
Rich Finelli、2016年

2
記録のために、fade()CSSでの作業はvarsのいない-つまりfade(var(--mycolor), 20%)
ed1nh0

26

完全を期すために

フェード

色の絶対透明度を設定します。既に不透明度の値があるかどうかに関係なく、色に適用できます。

background: fade(@blue, 20%);

フェードイン

色の透明度を下げる(または不透明度を上げる)と、色がより不透明になります。

background: fadein(@blue, 80%);

フェードアウト

色の透明度を上げ(または不透明度を下げ)、不透明度を下げます。反対方向にフェードインするには、フェードインを使用します。

background: fadeout(@blue, 20%);

完全なドキュメントを見る


1
フェードアウトはまさに私が探していたものです、ありがとう!
maxime1992
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.