Sass အရောင်

Sass အရောင်

ကျွန်တော်တို့သည် Sass အရောင်သတင်းပြုခြင်းကို သုံးပုံအုပ်စုအဖြစ် အပိုင်းခွဲကြသည်: အရောင်သတင်းပြုခြင်း၊ အရောင်သတင်းမှတ်ခြင်း၊ အရောင်သတင်းလုပ်ဆောင်ခြင်း

Sass အရောင်သတင်းပြုခြင်း

အသုံးပြုပုံ ဖော်ပြချက် & အမှတ်အသစ်
rgb(red, green, blue)

Red-Green-Blue (RGB) အရောင်စနစ်ကို အစိတ်အသုံးပြုခြင်း
rgb(red, green, blue) ဖြင့် RGB အရောင်အတိုင်း အစိတ်အသုံးပြု
တခုခုသည် အရောင်၏ ပြည့်ပြည့်မှုကို အစိတ်အသုံးပြုသော သတင်းဖြစ်သည်။ အစိတ်အသုံးပြုနိုင်သော အကွက် 0 မှ 255 အထိမှာ အဖွဲ့စည်းခြင်း ဖြစ်ပါသည်၊ သို့သော်မူ ရောင်ချိန်ချိန်ချိန် (0% မှ 100%) ဖြင့် အစိတ်အသုံးပြုနိုင်ပါ

实例：

rgb(0, 0, 255);
// အဖြူရောင်မှာပြတတ်သောကြောင်း၊ blue သတင်းကို အမြင့်အားအမြတ်အား (255) ဖြင့် အစိတ်အသုံးပြု၍၊ အခြား သတင်းများ 0 ဖြင့် အစိတ်အသုံးပြု
rgba(red, green, blue, alpha)

使用 Red-Green-Blue-Alpha (RGBA) 模型设置颜色。
RGBA အရောင် နှုန်း သည် RGB အရောင် နှုန်း၏ အပိုမို အပေါ်ပေါ်ပေါ် ဖြစ်ပါသည် - alpha ခွဲ ဖြင့် အရောင်၏ အမြင့်အကျယ် ကို ကိုးကွယ်ကြသည်。
alpha သဘောတူ သည် 0.0 (အပြည်ပြည်) နှင့် 1.0 (အပြည်ပြည်) အကြားသော နှုန်းအားဖြင့် ဖြစ်ပါသည်。

实例：

rgba(0, 0, 255, 0.3); // အမြင့် အကြီးကြီး
hsl(hue, saturation, lightness)

Hue-Saturation-Lightness (HSL) ဓာတ်ပြန်အရာ အားဖြင့် အရောင် ကို အသုံးပြုကြသည် - အရောင်၏ အာကာသ အတိုင်းတိုင်း ကို ကိုးကွယ်ကြသည်。
Hue (အကြောင်း) သည် အရောင် အကြီးကြီး ပေါ်မှ အချိန် ဖြစ်ပါသည် (0 နှင့် 360 အကြား) - 0 သို့မဟုတ် 360 သည် အပိုး ဖြစ်ပြီး 120 သည် အရောင် ဖြစ်ပြီး 240 သည် အကြီးကြီး ဖြစ်သည်
Saturation (အပူးအမြန်) သည် ရှစ်ပုံတန်း ဖြစ်ပါသည်; 0% သည် အရက် ဖြစ်ပြီး 100% သည် အရောင် ဖြစ်သည်。
Lightness (အလုံးအနှာ) သည် ရှစ်ပုံတန်း ဖြစ်ပါသည်; 0% သည် အရက် ဖြစ်ပြီး 100% သည် အရောင် ဖြစ်သည်。

实例：

hsl(120, 100%, 50%); // အရောင်
hsl(120, 100%, 75%); // အမြင့် ဂရင်းကွန်း
hsl(120, 100%, 25%); // အရောင်
hsl(120, 60%, 70%); // အမြင့် ဂရင်းကွန်း

hsla(hue, saturation, lightness, alpha)

Hue-Saturation-Lightness-Alpha (HSLA) ဓာတ်ပြန်အရာ အားဖြင့် အရောင် ကို အသုံးပြုကြသည်。
HSLA အရောင် နှုန်း သည် HSL အရောင် နှုန်း၏ အပိုမို အပေါ်ပေါ်ပေါ် ဖြစ်ပါသည် - alpha ခွဲ ဖြင့် အရောင်၏ အမြင့်အကျယ် ကို ကိုးကွယ်ကြသည်。
alpha သဘောတူ သည် 0.0 (အပြည်ပြည်) နှင့် 1.0 (အပြည်ပြည်) အကြားသော နှုန်းအားဖြင့် ဖြစ်ပါသည်。

实例：

hsl(120, 100%, 50%, 0.3); // အရောင်
hsl(120, 100%, 75%, 0.3); // အမြင့် ဂရင်းကွန်း

grayscale(color)

အရောင်၏ အလုံးအနှာ နှင့် အတူ အရောင် ကို အသုံးပြုကြသည်。

实例：

grayscale(#7fffd4);

ရလဒ်: #c6c6c6
complement(color)

အရောင်၏ အပြည်ပြည် အရောင် ကို အသုံးပြုကြသည်。

实例：

complement(#7fffd4);

ရလဒ်: #ff7faa
invert(color, weight)

အရောင်၏ အပြည်ပြည် သို့မဟုတ် အပေါ့သော အရောင် ကို အသုံးပြုကြသည်。
weightသဘောတူ သည် လုပ်ငန်းကို ရွေးချယ်လိုက် သည်။ အခြား 0% နှင့် 100% အကြားသော နှုန်းအားဖြင့် ဖြစ်ပါသည်။ မူလ သဘောတူ အား 100% ဖြစ်သည်。

实例：

invert(white);

ရလဒ်: black

Sass အရောင် နှုန်း လုပ်ငန်း

အသုံးပြုပုံ ဖော်ပြချက် & အမှတ်အသစ်
red(color)

ကို 0 နှင့် 255 အကြားသော နှုန်းအားဖြင့် အရောင်၏ အကြီးအကျယ် အသုံးပြုကြသည်。

实例：

red(#7fffd4);

ရလဒ်: 127

red(red);

ရလဒ်: 255
green(color)

ကို 0 နှင့် 255 အကြားသော နှုန်းအားဖြင့် အရောင်၏ ဂရင်းကွန်း အသုံးပြုကြသည်。

实例：

green(#7fffd4);

ရလဒ်: 255

green(blue);

ရလဒ်: 0
blue(color)

0 မှ 255 အထိ အရောင်၏ အကြီးအကျယ် ကို အရာဝတ္တုအချိန်ဖြင့် ပြန်ပေးပါ။

实例：

blue(#7fffd4);

ရလဒ်: 212

blue(blue);

ရလဒ်: 255
hue(color)

0deg မှ 360deg အထိ အရောင်၏ အရောင်အဆင်း ကို အရာဝတ္တုအချိန်ဖြင့် ပြန်ပေးပါ။

实例：

hue(#7fffd4);

ရလဒ်: 160deg
saturation(color)

0% မှ 100% အထိ အရောင်၏ HSL အရောင်အဆင်း ကို အရာဝတ္တုအချိန်ဖြင့် ပြန်ပေးပါ။

实例：

saturation(#7fffd4);

ရလဒ်: 100%
lightness(color)

0% မှ 100% အထိ အရောင်၏ HSL အရောင်အဆင်း ကို အရာဝတ္တုအချိန်ဖြင့် ပြန်ပေးပါ။

实例：

lightness(#7fffd4);

ရလဒ်: 74.9%
alpha(color)

0 မှ 1 အထိ အရောင်၏ alpha ခွဲခြားအရေးအချိန် ကို အရာဝတ္တုအချိန်ဖြင့် ပြန်ပေးပါ။

实例：

alpha(#7fffd4);

ရလဒ်: 1
opacity(color)

0 မှ 1 အထိ အရောင်၏ alpha ခွဲခြားအရေးအချိန် ကို အရာဝတ္တုအချိန်ဖြင့် ပြန်ပေးပါ။

实例：

opacity(rgba(127, 255, 212, 0.5));

ရလဒ်: 0.5

Sass အရောင် အထုံးအစိတ်အစား

အသုံးပြုပုံ ဖော်ပြချက် & အမှတ်အသစ်
mix(ဂရမ်1, color2, weight)

အရောင် 1 နှင့် အရောင် 2 ကို အသစ်အရောင် ပြုလုပ်ပါ။
weight အစိတ်အစား သည် 0% မှ 100% အထိ လိုက်သည်။ ပုံစံ 50% ဖြစ်ပါသည်။
ပိုမိုအရေအတွက် ဂရမ်အရေအတွက် အသုံးပြုထားသည့် ဂရမ်1。
နည်းပါးသော ဂရမ်အရေအတွက် ပိုမိုအသုံးပြုထားသည့် color2。

adjust-hue(color, degrees)

လျှပ်ပေး -360 ဒီဂရီလိုက် မှ 360 ဒီဂရီလိုက် အထိ အရောင်၏ အရောင်အဆင်း ကို ဒီဂရီလိုက်အထိ လျှပ်ပေးပါ။

实例：

adjust-hue(#7fffd4, 80deg);

ရလဒ်: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

အမှတ်အသစ်ဖြင့် တစ်ခုနှင့်အတူ သို့မဟုတ် အသုံးပြုထားသော အစိတ်အစား ကို မျှကွက်ပါ။
ဤအသုံးပြုသည်မှာ အရောင်၏ အခြေခံ အရေးအချိန်တွင် အမှတ်အသစ်ဖြင့် အသုံးပြုပါ။

实例：

adjust-color(#7fffd4, blue: 25);

ရလဒ်:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

အရောင်၏ တစ်ခုနှင့်အတူ သို့မဟုတ် အသုံးပြုထားသော အစိတ်အစား ကို အသစ်အရေးအချိန်ဖြင့် သတ်မှတ်ပါ။

实例：

change-color(#7fffd4, red: 255);

ရလဒ်: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha) တစ်ခုနှင့်အတူ သို့မဟုတ် အသုံးပြုထားသော အရောင်အစိတ်အစား ကို မျှကွက်ပါ။
rgba(အရောင်, alpha)

ပေးထားသော alpha ခွဲခြားသည့် အရေးအချိန်ဖြင့် အသစ်အရောင်တစ်ခု ဖန်တီးကြိုးပေးပါ။

实例：

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
lighten(color, amount) 使用介于 0% 和 100% 之间的量创建更浅的颜色。
amount 参数按百分比提高 HSL 亮度。
darken(color, amount) 使用介于 0% 到 100% 之间的量创建更深的颜色。
amount 参数按百分比降低 HSL 亮度。
saturate(color, amount) 使用介于 0% 和 100% 之间的量创建更饱和的颜色。
amount 参数按百分比提高 HSL 饱和度。
desaturate(color, amount) 使用介于 0% 和 100% 之间的量创建饱和度较低的颜色。
amount အရေးပါခြင်း အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ
opacify(color, amount) 0 နှင့် 1 အကြား အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ ဖြင့် အမြင့်ပြတ် အရောင် ဖန်တီးပါ
amount အရေးပါခြင်း အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ
fade-in(color, amount) 0 နှင့် 1 အကြား အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ ဖြင့် အမြင့်ပြတ် အရောင် ဖန်တီးပါ
amount အရေးပါခြင်း အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ
transparentize(color, amount) 0 နှင့် 1 အကြား အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ ဖြင့် အမြင့်မြတ် အရောင် ဖန်တီးပါ
amount အရေးပါခြင်း အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ
fade-out(color, amount) 0 နှင့် 1 အကြား အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ ဖြင့် အမြင့်မြတ် အရောင် ဖန်တီးပါ
amount အရေးပါခြင်း အရေးအချိန် ပြုလုပ်မှု အတိုင်း အခြေခံ အယူအဆ