Sass の基本 (7)_html/css_WEB-ITnose

Sass Maps function-map-remove($map,$key),keywords($args)
map-remove($map,$key)
map-remove($map,$key) 関数ですは、現在の $map 内の特定の $key を削除して新しいマップを取得するために使用されます。返される値は、マップ内の
を直接削除することはできません。新しい地図
$map:map-remove($social - Colors,dribble);
$map:(
facebook:#3b5998,
github:#171515,
google: .
パラメータも出てきますのペアのうち、$args がキーとなり（$ 記号は自動的に削除されます）、
$args に対応する値が value.
@mixin map($args...){
@debugKeywords($args);
}
@include map(
$dribble: #ea4c89,
$facebook:#3b5998,
$github:#171515,
twitter:#55acee
);

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

そして色の変更など。
1.RGBカラー関数
RGBカラーは単なる色の表現で、Rは赤、Gは緑、Bは青です
SassではRGBカラーに対して6つの関数が用意されています:
rgb($ red,$green,$blue): 赤、緑、青の3つの値を元に色を作成します
rgba($red,$green,$blue,$alpha): 赤を元に色を作成します、緑、青、透明色。 red($color): 色から赤の値を取得する: green($color): 色から緑の値を取得する:
blue($color): 色から青の値を取得する:
mix($color) -1,$color-2,[$weight]): Liang さんの色を混ぜ合わせます。

$ sass -i
>>rgb(200,40,88) //r:200、g:40、b;88に基づいて16進数のカラー値を計算します。
#c82858
>> rgba(#c82858,.65) //#c82858 の 65% の透明度に基づいて rgba カラー値を計算します。
rgba(200,40,88,0.65)
>>red(#c82858) //#c82858 色から赤の値を取得
00
>> green(#c82858) //#c82858より色の青の値
を取得します 88
88
88
.65) 2つの色を比例して混合して新しい色を取得します
rgba(200,40,80,0.65105)
RGBカラー関数-RGBA()関数
2. rgba() 関数は主に、透明度に基づいて色を rgba カラーに変換するために使用されます。
構文には2つの形式があります
rgba($red,$green,$blue,$alpha) // 未翻訳の値と同じrgbaカラーを翻訳します。
rgba（$ color、$ alpha）// hex色をrgba色に変換します// Hex カラーを rgba カラーに変換します。値は #f36 または red ですが、使用する場合は、これらに透明度を追加する必要があります。このとき、元の CSS では、まず描画ツールを使用して取得する必要があります。
の代わりに、#f36 または赤色の R、G、B 値。 background: rgba(orange,.5);
border -color: rgba(green,.5);
}
構文:
この例では、Sass の rgba 関数を使用します。最初のパラメータは、変換する必要がある色です。これは任意の色の式、または色の変数にすることができます。2 番目のパラメータは色の透明度であり、その値は 0 ～ 1 です。上記コードを翻訳すると、
.rgba {
color: rgba(255, 51, 102, 0.5);
background: rgba(255, 165, 0, 0.5);
: rgba(0, 128, 0 , 0.5) ;
}
: rgba($bgColor,.5);
border- color: rgba($borderColor,.5);
55, 51, 102, 0.5);
背景: rgba(255, 165 , 0, 0.5);
border-color: rgba(0, 128, 0, 0.5);
red () 関数は、#f36 の色が存在しないことを前提として、非常に単純です。 , #f36 の red
の表示を取得したい場合は、red() 関数を使用すると簡単に取得できます。
＆gt;＆gt;私の中の赤い関数で、特定の色の緑の値を取得するために、「＃f36」色を例として取ります>>green(#f36)
51
5.Blue()関数
同様に、blue()関数は、特定の値 color での bliue の値を取得するために使用されます
>> blue(#f36)
102
RGBカラー関数-Mix()関数
Mix関数は2つの色を一定の割合で混ぜ合わせて別の色を生成する関数です
mix($color-1,$$color-2,$weight);
$ color-1 と $color-2 は、マージする必要がある色を参照します。色には、任意の式または色変数を指定できます。
$weight はマージの割合（選択の重み）、デフォルト値は 50%、値の範囲は 0~1 で、各 RGB の割合です
割合は 50% で、各色が占める割合を意味しますHalf 、指定された割合が 25% の場合、最初の色が 25% を占め、2 番目の色が 75% を占めることを意味します。
mix(#f00,#00f) =>#7f007f
mix(rgba(255,0,0,0.5),#00f) =>rgba(63,0,191.0.75 in これまでの手順を踏まえて修正を加えます
//SCSS
$color1:#a63;
$borderColor1:#c36;
$borderColor2 :#b36;
.mix{
background:mix($bgColor1,bgColor2,.75);
color:mix($color1, $color2,.25); border-color:
mix($borderColor1,(bgColor2 ,.05));
}
コンパイルされたcssコード
//css
.mix{
background:#ee3366;
色:# fefefe;
border-color:#ed33
}

HSL関数の紹介

Sassには、彩度、明度、色合いの調整、明るくする、暗くするなどの一連のHSLカラー関数が用意されています。 。次に、HSL カラー関数には具体的にどのような機能が含まれており、その役割は何なのかをまず理解しましょう:

1. hsl($hue,$saturation,$lightness): through hue (色相)、saturation (彩度) で色を作成します。明度の値;
2, hsla($hue,$saturation,$lightness,$alpha): 色相、彩度、明度、透明度(alpha)を通して色を作成します
3. hue($color): 取得色から色相の値を取得します。 4. lightness($color): 色から明度の値を取得します。 5. darken($color,$amount): 色を暗くし、明るさの値を変更して新しい色を作成します。色; 6. saturate($color,$amount): 色の彩度値を変更して色を暗くし、新しい色を作成します 7. Desaturate($color,$amount): 色を作成します。色の彩度値を変更することで彩度を下げ、新しい色を作成します
8. Grayscale($color ): 色を灰色に変更します。これは desaturate($color,100%) と同等です。 ): 補色を返します。adjust-hue($color,180deg) と同等です。
10, invert ($color): 透明度を保ったまま、赤、緑、青の値を反転した反転した色を返します。変更なし。

また、ターミナルで sass -i を使用して、上記の各関数の簡単なテストを実行します:
>> hs1(200,30%,60%) // h200, s30% l60% Color を返して作成します
)
>> hue(#7ab) // #7ab colorの色相値を取得
t;lightness(#7ab) // #7ab colorの明るさを取得
60%
>>adjust-hue(#f36,150deg ) // #f36 色の色相値を 150deg に変更します

#ffffff
>>darken(#f36,50%) // #f36 色の明るさを増加しますby 50%
Put #f36 color saturation Increase 50%
6) // #f36 Gray
の色を変更します

HSL function-lighten()

lighten()とdarken()の2つ 関数はすべて調整されていますlighten() 関数は色を明るくし、darken() 関数は色を暗くします。この輝度値は 0 ～ 1 の間で指定できますが、一般的に使用される値は通常 3% ～ 20% の間です。
.background: lighten($baseColor,10%)
}
.darken{
background: darken($baseColor,10%)
}
コンパイルされたcssコード //CSS .lighten{
background:#db1926;
}
.Darken {
背景：＃7F0F16;明るさを変更するために紹介した方法は、新しい色を入手するのは非常に似ています。 aturate{
background:desaturate($baseColor,30%); // 元の色の彩度に基づいて彩度を下げます。
}
background:#903137;
}

HSL function-adjust-hue() function

色の色相を調整して新しい色に変換します。彼には色と位相値が必要です。通常、この度数の値は -360deg から 360deg の間ですが、もちろんパーセンテージにすることもできます:
//SCSS
$baseColor:#ad14le;
.adjust-hue-deg{
background:adjust-hue($baseColor,30deg) ; .adjust-hue-deg{
background:ad5614;
}
.adjust-hue-per{
background:#ad5614;
}

HSL function-grayscale() Function色の彩度値を0%にするので、この関数はdesaturate($ color,100%)と同じです
）通常、この関数は色付きの色をさまざまな程度のグレーに変換します。例:
// SCSS
$baseColor:#ad141e;
.grayscale{
background:grayscale($baseColor);
}
.desaturate{
Background:desaturate($baseColor,100%)
}
コンパイル済みCSSコード
//css
.grayscale{
background:#61616 1;
.desatur ate{
background:#616161;
}

不透明度関数の紹介 色の透明度を制御するために rgba、hsla、transform を使うことに加えて
CSS では、不透明度を使ってそれを制御することもできますが、最初の 2 つは色の透明度チャンネルのみを扱い、後者は全体の透明度を制御します。要素。

Sass では一連の透明度関数も提供されていますが、この一連の透明度関数は主に色の透明度を扱うために使用されます:
alpha($color) / opacity($color) で色の透明度を取得します
rgba($color, $alpha) :色の透明度の値を変更します。
opacify($color,$amount) / fade-in($color,$amount): 色をより不透明にする
transparentize($color,$amount) / fade-out($color,$amount) 色をより不透明にする透明。
Opacity function-alpha(), opacity() function
alphpa() と opacity() 関数は非常に単純で、以前に紹介した red()、green() などの関数とよく似ています。この関数の主な機能は、色の透明度の値を取得することです。 If
アルファ(赤)
1
>> >>不透明度(赤)
1
>>不透明度(rgba(red,.8))
.8

不透明度関数-rgba()関数

私たちもRGB関数に関する前のセクションでinしたのを覚えていますか？色を作成し、色の透明度を変更できる rgba() 関数があります。 2 つのパラメーターを受け入れることができます。
最初のパラメーターは色で、2 番目のパラメーターは設定する必要がある色の透明度の値です。 >>rgba(red,.5) rgba(255,0,00.5)
gt;>rgba(rgb( 34,45,44),.5)
rgba(34, 45, 44, 0.5) )
>> rgba(rgba(33,45,123,.2),.5)
>> ,. 57 54, 50, 0.5)

OPACITY 関数 -OPACIFY ()、FADE-in () 関数

これら 2 つの関数は、既存の色の透明度を行うために使用されます。加算操作により、色
がより不透明になります。 2 つのパラメータを受け入れます。最初のパラメータは元の色で、2 番目のパラメータは増加する必要がある透明度の値です。値の範囲は主に 0 から 1 です。透明度の値が 1 より大きくなると、その色は透明度を持たないことを示す 1 として計算されます。
>>opacify(rgba(22,34,235,.6),.2)
rgba(22,34,235,0.8)
>>opacify(rgba(22,34,235,.6),.5)
#1622eb
>>opacify(hsla(22,34,235,.6),.15)
rgba(79,53,39,0.75)
>>opacify(hsla(22,34%,23%, .6),.415) rgba(23,34,34,.5),.15)
rgba(23, 34,34,0.65)
>>フェードイン(rgba (23,34,34,.5),.615)
#172222

Opacity function-transparentize(), fade-out()関数

transparentize()関数とfade-out()関数の関数は、 opacify() や fade-in()
関数の反対で、色をより透明にします。これら 2 つの関数は、透明度の値を減算します。計算結果が 0 未満の場合、完全な透明度を示す 0 として計算されます。
>>transparentize(red,.5)
rgba(255,0,0,0.5)
t;>transparentize( rgba(98,233,124,.3),.11)
rgba(98, 233, 124, 0.19)
>> 透明化(rgba(98,233,124,.3),.51)
>> フェードアウト(red,.9)
rgba(255, 0, 0, 0.1)
>> フェードアウト(hsla(98,6%,23%,.5),. 1)
rgba(58, 62, 55, 0.4)
>> out(hsla(98,6%,23%,.5),.6)
rgba(58, 62, 55, 0)