This box uses darken() to make the color darker.
darken($base-color, 20%)
This box uses lighten() to make the color lighter.
lighten($base-color, 20%)
This box uses mix() to combine the colors.
mix($base-color, $secondary-color, 40%)
This box uses adjust-hue() to change the hue of the color.
adjust-hue($base-color, 60deg)
This box uses rgba() for a color with transparency.
rgba($base-color, 0.6)
This box uses hsla() for a color with Hue, Saturation, Lightness, and Transparency.
hsla(200, 100%, 70%, 0.5)
This box uses invert() to invert the color.
invert($base-color)
This box uses calc() to calculate width dynamically.
calc(100% - 20px)
| الدالة | الشرح | الاستخدام | المثال |
|---|---|---|---|
| darken() | تجعل اللون أغمق بنسبة معينة | لتعتيم اللون | darken($base-color, 20%) |
| lighten() | تجعل اللون أفتح بنسبة معينة | لتفتيح اللون | lighten($base-color, 20%) |
| mix() | دمج لونين معًا بنسبة معينة | دمج الألوان معًا | mix($base-color, $secondary-color, 40%) |
| adjust-hue() | تغيير درجة الـ Hue للون | لتغيير درجة اللون بدون التأثير على السطوع | adjust-hue($base-color, 60deg) |
| rgba() | إنشاء لون مع الشفافية | لإضافة شفافية للألوان | rgba($base-color, 0.6) |
| hsla() | إنشاء لون باستخدام الـ HSL مع الشفافية | لتحديد اللون باستخدام HSL والشفافية | hsla(200, 100%, 70%, 0.5) |
| invert() | عكس اللون | لعكس اللون إلى لونه المكمل | invert($base-color) |
| calc() | إجراء عمليات حسابية داخل الـ CSS | لحساب القيم الرياضية مثل العرض أو الطول | calc(100% - 20px) |