Sass関数 カラー関数 RGBカラー function_html/css_WEB-ITnose

RGB カラー関数 - RGB() カラー関数

は主に、 RGB、HSL、 Opacity の 3 つの主要な関数に分かれています。 もちろん、次のような他のカラー関数も含まれています。色の調整や色の変更など。
1. RGB カラー関数
RGB カラーは単なる色の表現であり、R は赤、G は緑、B は青です。 Sass では RGB カラー用に 6 つの関数が提供されています。

rgb($red,$green,$blue): 赤、緑、青の 3 つの値に基づいて色を作成します。

rgba($red, $green,$blue ,$alpha): 赤、緑、青、透明度の値に基づいて色を作成します。

red($color): 色から赤の値を取得します。色の値から緑色の値を取得します。

blue($color): 色から青色の値を取得します。

mix($color-1,$color-2,[$weight]): 2 つの色を混合します。

 1 sass -i 2 //在命令终端开启这个命令，相当于开启 Sass 的函数计算。 3 $ sass -i 4 >> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值 5 #c82858 6 >> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值 7 rgba(200, 40, 88, 0.65) 8 >> red(#c82858) //从#c82858颜色值中得到红色值 200 9 20010 >> green(#c82858) //从#c82858颜色值中得到绿色值 4011 4012 >> blue(#c82858) //从#c82858颜色值中得到蓝色值 8813 8814 >> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色15 rgba(200, 40, 80, 0.65105)

2 rgba() 関数は、主に透明度に基づいて色を rgba カラーに変換するために使用されます。

構文には 2 つの形式があります:

rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来，和未转译的值一样rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色

rgba($color,$alpha)

この関数は主に次のような状況で使用されます: 実際に既知の色の値は #f36 または red であると仮定しますが、使用する場合、この時点で、元の CSS では、まず描画ツールを使用して #f36 または赤色の R、G、B 値を取得する必要がありますが、これは取得できません。直接使用します (css3 は利用可能ですが、ブラウザの互換性の問題があることに注意してください):

1 $color: #f36;2 $bgColor: orange;3 $borderColor:green;

.5

透明度も追加します:

1 //SCSS2 .rgba {3 color: rgba(#f36,.5);4 background: rgba(orange,.5);5 border-color: rgba(green,.5);6 }

構文:

括弧は関数のパラメータです。 最初のパラメータ は必須です 変換された色 は任意の色表現、または色変数にすることができます。 2 番目のパラメータ は色の透明度 であり、その値は 0~1 の間です 。

1 .rgba {2  color: rgba(255, 51, 102, 0.5);3  background: rgba(255, 165, 0, 0.5);4  border-color: rgba(0, 128, 0, 0.5);5 }

以前に定義した変数を呼び出します:

1 //SCSS2 .rgba {3  color: rgba($color,.5);4  background: rgba($bgColor,.5);5  border-color: rgba($borderColor,.5);6 }

原色を別の色に変換します:

3. Red() 関数

3.

red() 関数、そのメイン関数色の赤の値を取得するために使用されます。 #f36 という色があるとします。#f36 の赤色の値を取得したい場合は、 red() 関数
を使用することで簡単に取得できます。

>> red(#f36)255

得られた値は「255」です。 (注: 最初にコマンドターミナルで sass -i コマンドを入力する必要があります)

4. Green() 関数

green() 関数は、使用される red()
関数と同じです。特定の色を取得するには、値に緑の値を入れます。 "#f36" カラーを例に挙げます。

>> green(#f36)51

5. Blue() 関数

同様に、blue() 関数は、特定のカラー値の青の値を取得するために使用されます。 、例えば:

>> blue(#f36)102

RGB カラー関数 - Mix() 関数

Mix 関数は、2 つの色を特定の比率に従って混合して、別の色を生成します。使用構文は次のとおりです。

mix($color-1,$color-2,$weight);

$color-1

および

$color-2

は、マージする必要がある色を参照します。色は、任意の式または色変数にすることができます。 $weight は結合の割合 (選択の重み) で、デフォルト値は 50%、値の範囲は 0 ～ 1 です。これは各 RGB のパーセンテージとして測定され、もちろん透明度にもある程度の重みがあります。デフォルトの比率は 50% で、これは各色の半分を意味します。指定された比率が 25% の場合、最初の色の 25% と 2 番目の色の 75% を意味します。

1 mix(#f00, #00f) => #7f007f2 mix(#f00, #00f, 25%) => #3f00bf3 mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

前のコードに基づいて変更を加えます:

 1 //SCSS 2 $color1: #a63; 3 $color2: #fff; 4 $bgColor1: #f36; 5 $bgColor2: #e36; 6 $borderColor1:#c36; 7 $borderColor2:#b36; 8 .mix { 9  background: mix($bgColor1,$bgColor2,.75);10  color: mix($color1,$color2,.25);11  border-color: mix($borderColor1,$bgColor2,.05);12 }

コンパイルされた CSS コード:

1 //CSS2 .mix {3  background: #ee3366;4  color: #fefefe;5  border-color: #ed336 }

これが Mix 関数の仕組みです。関数内で 3 つの関数を指定します。最初の 2 つの関数は混合したい色 (カラー変数、16 進数、RGBA、RGB、HSL、または HSLA カラー値を渡すことができることに注意してください)。 3 番目のパラメーターは、最初の色のスケール値です。