Sass/saturation

تُعيدُ الدالة ()saturation قيمة مُكوّن التشبُّع (saturation) للون الممرَّر إليها.

البنية العامة

saturation($color)

المعاملات

‎$color

القيمة اللونيَّة التي نريد الحصول على مكوِّن التشبُّع الخاص بها.

القيم المعادة

تُعاد قيمة التشبّع للون ‎$color، وتكون بين %0 و %100.

الأخطاء والاستثناءات

سيُرمى الخطأ ArgumentError إن لم يكن ‎$color لونًا.

أمثلة

مثال عن استخدام الدالة saturation()‎ لمقارنة تشبّع اللون المُعرَّف من المستخدم بالقيمة 50% باستخدام التعليمة ‎@if، ثم اعتمادًا على نتيجة الشرط السابق فسنجعل اللون أكثر تشبعًا (باستخدام الدالة saturate()‎) أو أقل تشبعًا (باستخدام الدالة desaturate()‎):

$color: salmon;

.selector {
  // اختبار إن كان تشبّع اللون أكبر من 50 بالمئة
  @if saturation($color) > 50% {
    // جعل اللون أقل تشبعًا بنسبة 20 بالمئة
    color: desaturate($color, 20%);
  } @else {
    // جعل اللون أكثر تشبعًا بنسبة 20 بالمئة
    color: saturate($color, 20%);
  }
}

ستُصرّف الشيفرة السابقة إلى شيفرة CSS الآتية:

.selector {
  color: #eb8c81; }

انظر أيضًا

• الدالة ()saturate: تزيد من تشبُّع اللون.
• الدالة desaturate()‎: تجعل اللون أقل تشبّعًا.
• الدالة ()lightness: تُعيدُ قيمة مُكوّن السطوع للون الممرَّر إليها.
• الدالة hue()‎: تُعيدُ قيمة مُكوّن الصبغة للون الممرَّر إليها.
• الدالة red()‎: تعيد قيمة المكوِّن الأحمر للون الممرَّر إليها.
• الدالة ()blue‎: تعيد قيمة المكوِّن الأزرق للون الممرَّر إليها.
• الدالة ()green‎: تعيد قيمة المكوِّن الأخضر للون الممرَّر إليها.
• الدالة hsl()‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع والسطوع.

مصادر

• قسم الدالة saturation في صفحة الدوال في توثيق Sass الرسمي.