2017-07-21 20 views
0

私は、変数が透明値に割り当てられた$ COLOR0と呼ばれ、次のように持っている:あなたは暗くを使用する場合SCSSルールパー暗くSCSS機能

$color0: transparent; 

、/それが何をすべき変数に関数を軽減それだけ。私は赤の変数に割り当てられた赤い色を持っているのであれば、私はそれを暗くかそこらのようにそれを軽減することができるはずです。

$red: #ff0000; 
.my-darker-color{ 
    color: darken($red, 20%); //produces #990000 
} 

は、私も、元の半透明の値で、この機能を使用することができますし、それはまだ暗くなりますそれ!だから私はまだそうと同じように、SCSS機能とそれをバック暗くすることができ、たとえば、私はRGBA(253、0、0、0.48)に手動で赤色の透明度を減らす、と言う:

$red: rgba(253, 0, 0, 0.48); 
.my-darker-color{ 
    color: darken($red, 20%); //produces rgba(151, 0, 0, 0.48) close to #990000 
} 

を今、ここにありますもの。私が透明度をさらに低くすると、透明性が向上します。

$color0: transparent; 
.my-darker-color{ 
    color: darken($color0, 80%); //give me anything...just not a transparency 
} 

ないのはなぜ暗くSCSS機能を:ここ

私の計画は、このように、完全な透明変数(。私は濃い灰色または黒を前提としている、それが生成する色は関係ありません)を暗くすることです透明な値で作業しますか?

+0

透明度をどのように暗くしたいですか?何でもありません。何も暗くしたり、明るくすることはできません。必要に応じて半透明色にRGBAを使用できます。 – Sergey

+0

確かに、技術的に透明な色はブラウザ内でrgba(0、0、0、0)としてレンダリングされ、暗くなります。たとえば、rgba(0、0、0、0.15); 15%暗いです – LOTUSMS

+0

あなたにとって透明です。私はこの2つの機能のアルゴリズムを見ていませんでした。しかし、それはバグではないかもしれません。 – Sergey

答えて

1

transparent色の値は、実際の色よりも多くの参照を意味します。ブラウザはそれをrgba(0, 0, 0, 0)に変換しますが、SASSは参照の明/暗をサポートしません。

現在のコードの代わりに、単純に$color0: rgba(0,0,0,0);と設定します。これにより同じ結果(透過性)が得られますが、SASSには必要に応じて明るくするオプションが与えられます。

ダークン/ライトネは、最初の3つの値に影響する可能性が最も高いことに注意してください.rgba(200,200,200,0)になる可能性があります。これはまだ透過的です。 SASSでこの変数を暗くしたり明るくしたりするときは、透明度の値を変更して確実に表示されるようにする必要があります。

関連する問題