.

iT邦幫忙

2022 iThome 鐵人賽

DAY 30
0
Modern Web

菜鳥30日自學SASS及SCSS系列 第 30

【D-3 0】進階Sass的顏色函數(2)

  • 分享至 

  • xImage
  •  

HSL()函數

H:hue(色相)、S:saturation(飽和度)、L:lightness(亮度)

  1. hsl($hue,$saturation,$lightness):通過色相(hue)、飽和度(saturation)和亮度(lightness)的值創建一個顏色。
// scss //
a{
    Hsl:hsl(20,40%,60%);
}

| 編譯後:依照h:20,s:40%,l:60%創建一個顏色值 #c28b70。

// css //
a {
  Hsl: #c28b70;
}
  1. hsla($hue,$saturation,$lightness,$alpha):通過色相(hue)、飽和度(saturation)、亮度(lightness)和透明(alpha)的值創建一個顏色。
// scss //
b{
    Hsla:hsla(20,40%,60%,.87);
}

| 編譯後:依照h:20,s:40%,l:60%,a:87%創建一個顏色值。

// css //
b {
  Hsla: rgba(194, 139, 112, 0.87);
}
  1. hue($color):從一個顏色中獲取色相(hue)值。
// scss //
c{
    Hue:hue(#14283c);
}

| 編譯後:得到#14283c的色相值。

// css //
c {
  Hue: 210deg;
}
  1. saturation($color):從一個顏色中獲取飽和度(saturation)值。
// scss //
d{
    Saturation:saturation(#14283c);
}

| 編譯後:得到#14283c的飽和度值。

// css //
d {
  Saturation: 50%;
}
  1. lightness($color):從一個顏色中獲取亮度(lightness)值。
// scss //
e{
    Lightness:lightness(#14283c);
}

| 編譯後:得到#14283c的亮度值。

// css //
e {
  Lightness: 15.6862745098%;
}
  1. adjust-hue($color,$degrees):通過改變一個顏色的色相值,創建一個新的顏色。色相度數值在-360deg至360deg之間(deg=%),
// scss //
f{
    Adjust-hue:adjust-hue(#14283c,150deg);
}

| 編譯後:改變#14283c顏色的色相值為150deg。

// css //
f {
  Adjust-hue: #3c1414;
}
  1. lighten($color,$amount):通過改變顏色的亮度值,讓顏色變亮,創建一個新的顏色。
// scss //
g{
    Lighten:lighten(#14283c,50%);
}
g{
    Lighten:lighten(#14283c,99%);
}

| 編譯後:把#14283c顏色亮度提高50%、99%。
V     (當顏色的亮度值接近或大於100%,顏色會變成白色)。

// css //
g {
  Lighten: #7ca8d3;
}
g {
  Lighten: white;
}
  1. darken($color,$amount):通過改變顏色的亮度值,讓顏色變暗,創建一個新的顏色。
// scss //
h{
    Darken:darken(#14283c,10%);
}
h{
    Darken:darken(#14283c,99%);
}

| 編譯後:把#14283c顏色亮度降低10%、99%。
V     (當顏色的亮度值接近或大於100%,顏色會變成黑色)。

// css //
h {
  Darken: #070f16;
}
h {
  Darken: black;
}
  1. saturate($color,$amount):通過改變顏色的飽和度值,讓顏色更飽和,從而創建一個新的顏色。
// scss //
i{
    Saturate:saturate(#14283c,50%);
}

| 編譯後:把#14283c顏色飽和度提高50%。

// css //
i {
  Saturate: #002850;
}
  1. desaturate($color,$amount):通過改變顏色的飽和度值,讓顏色更少的飽和,從而創建出一個新的顏色。
// scss //
j{
    Desaturate:desaturate(#14283c,50%);
}

| 編譯後:把#14283c顏色飽和度降低50%。

// css //
j {
  Desaturate: #282828;
}
  1. grayscale($color):將一個顏色變成灰色,相當於desaturate($color,100%)。
// scss //
k{
    Grayscale:grayscale(#14283c);
}

| 編譯後:把#14283c顏色變成灰色。

// css //
k {
  Grayscale: #282828;
}
  1. complement($color):返回一個補充色,相當於adjust-hue($color,180deg)。
// scss //
l{
    Complement:complement(#14283c);
}

| 編譯後

// css //
l {
  Complement: #3c2814;
}
  1. invert($color):反回一個反相色,紅、綠、藍色值倒過來,而透明度不變。
// scss //
m{
    Invert:invert(#14283c);
}

| 編譯後

// css //
m {
  Invert: #ebd7c3;
}

上一篇
【D-2 9】進階Sass的顏色函數(1)
系列文
菜鳥30日自學SASS及SCSS30
.
圖片
  直播研討會

尚未有邦友留言

立即登入留言