وظائف الألوان Sass

وظائف الألوان Sass

نقسم وظائف اللون في Sass إلى ثلاثة أجزاء: وظائف إعداد اللون، وظائف الحصول على اللون، وعمل وظائف اللون:

وظيفة إعداد اللون Sass

وظائف Sass لمعالجة الألوان الوظيفة
rgb(الأحمر, الخضراء, الأزرق)

ضبط اللون باستخدام نموذج Red-Green-Blue (RGB).
تحديد قيمة اللون RGB باستخدام rgb(red, green, blue).
تعريف كل معلمة شدة اللون، يمكن أن تكون عددًا صحيحًا بين 0 و255، أو نسبة مئوية (من 0% إلى 100%)。

مثال:}

rgb(0, 0, 255);
// التمثيل باللون الأزرق، لأن تمثل المعلمة blue تم ضبطها عند أعلى قيمتها (255)، بينما تم ضبط المعلمات الأخرى على 0
rgba(الأحمر, الخضراء, الأزرق, الألفة)

تعيين اللون باستخدام نموذج Red-Green-Blue-Alpha (RGBA).
قيمة RGBA هي إضافة إلى قيمة RGB مع قناة ألفا - تحدد شفافية اللون.
الألفة المعامل هو رقم بين 0.0 (شفاف) و1.0 (غير شفاف).

مثال:}

rgba(0, 0, 255, 0.3); // لون أزرق شفاف
hsl(اللون المضيء, الإشباع, الإضاءة)

تعيين اللون باستخدام نموذج Hue-Saturation-Lightness - وهو تمثيل عمودي للون.
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 (HSLA).
قيمة HSLA هي إضافة إلى قيمة HSL مع قناة ألفا - تحدد شفافية اللون.
الألفة المعامل هو رقم بين 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, إنشاء لون مدمج من لون 1 ولون 2.)

تعيين اللون المعكوس أو السلبي.
إنشاء لون مدمج من لون 1 ولون 2.المعامل هو اختياري، يجب أن يكون رقمًا بين 0% و100%.

مثال:}

invert(white);

النتيجة: أسود

وظيفة Sass للحصول على اللون

وظائف Sass لمعالجة الألوان الوظيفة
red(color)

بإرجاع القيمة الحمراء لللون باستخدام الرقم بين 0 و255.

مثال:}

red(#7fffd4);

النتيجة: 127

red(red);

blue(blue);
green(color)

بإرجاع القيمة الخضراء لللون باستخدام الرقم بين 0 و255.

مثال:}

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
النتيجة: 0color)

blue(

مثال:}

استرداد قيمة الأزرق للألوان بين 0 و 255 كعدد.

blue(#7fffd4);

النتيجة: 212

blue(blue);
النتيجة: 255color)

hue(

مثال:}

استرداد لون الألوان بين 0deg و 360deg كعدد.

hue(#7fffd4);
النتيجة: 160degcolor)

saturation(

مثال:}

استرداد إشباع الألوان بين 0% و 100% كعدد.

saturation(#7fffd4);
النتيجة: 100%color)

lightness(

مثال:}

استرداد إضاءة الألوان بين 0% و 100% كعدد.

lightness(#7fffd4);
النتيجة: 74.9%color)

opacity(

مثال:}

alpha(

alpha(#7fffd4);
النتيجة: 1color)

opacity(

مثال:}

استرداد قناة الألفة للألوان بين 0 و 1 كعدد.

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

النتيجة: 0.5

وظائف Sass لمعالجة الألوان الوظيفة
الوصف والنموذجالوزن الأكبر يعني استخدام المزيد من, color2, إنشاء لون مدمج من لون 1 ولون 2.)

mix(
إنشاء لون مدمج من لون 1 ولون 2. وزن
المعلمات يجب أن تكون بين 0% و 100%. القيمة الافتراضية هي 50%. الوزن الأكبر يعني استخدام المزيد من.
الوزن الأصغر يعني استخدام المزيد من color2.

adjust-hue(color, الدرجات)

تعديل لون الألوان بالدرجات من -360 إلى 360 درجة.

مثال:}

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

النتيجة: #8080ff
adjust-color(color, الأحمر, الخضراء, الأزرق, اللون المضيء, الإشباع, الإضاءة, الألفة)

تعديل واحد أو أكثر من معلمات الألوان بمقدار محدد.
هذه الوظيفة تضيف أو تقلل كمية محددة من القيم إلى القيم الحالية للألوان.

مثال:}

adjust-color(#7fffd4, الأزرق: 25);

النتيجة:
change-color(color, الأحمر, الخضراء, الأزرق, اللون المضيء, الإشباع, الإضاءة, الألفة)

تعيين واحد أو أكثر من معلمات الألوان إلى قيم جديدة.

مثال:}

change-color(#7fffd4, الأحمر: 255);

النتيجة: #ffffd4
scale-color(color, الأحمر, الخضراء, الأزرق, الإشباع, الإضاءة, الألفة) تكبير أو تقليل واحد أو أكثر من معلمات الألوان.
rgba(اللون، الألفة)

استخدام قناة الألوان المحددة لإنشاء لون جديد.

مثال:}

rgba(#7fffd4, 30%);

نتيجة: rgba(127, 255, 212, 0.3)
lighten(color, quantity) استخدام كمية بين 0% و 100% لإنشاء ألوان أكثر ضوحًا.
quantity المتغيرات تزيد من درجة الإضاءة HSL بناءً على النسبة المئوية.
darken(color, quantity) استخدام كمية بين 0% إلى 100% لإنشاء ألوان أكثر إثارة.
quantity المتغيرات تقلل من درجة الإضاءة HSL بناءً على النسبة المئوية.
saturate(color, quantity) استخدام كمية بين 0% و 100% لإنشاء ألوان أكثر تشبعًا.
quantity المتغيرات تزيد من درجة التشبع HSL بناءً على النسبة المئوية.
desaturate(color, quantity) استخدام كمية بين 0% و 100% لإنشاء ألوان ذات درجة تشبع منخفضة.
quantity المتغيرات تقلل من درجة التشبع HSL بناءً على النسبة المئوية.
opacify(color, quantity) استخدام عدد بين 0 و 1 لإنشاء ألوان غير شفافة.
quantity المتغيرات تزيد من قناة الألفا بناءً على قيمتها.
fade-in(color, quantity) استخدام عدد بين 0 و 1 لإنشاء ألوان غير شفافة.
quantity المتغيرات تقلل من قناة الألفا بناءً على قيمتها.
transparentize(color, quantity) استخدام عدد بين 0 و 1 لإنشاء ألوان شفافة.
quantity المتغيرات تقلل من قناة الألفا بناءً على قيمتها.
fade-out(color, quantity) استخدام عدد بين 0 و 1 لإنشاء ألوان شفافة.
quantity المتغيرات تزيد من قناة الألفا بناءً على قيمتها.