الدالة change_color() في Sass
تغيّر الدالة ()change_color خاصيات اللون: الأحمر والأخضر والأزرق والتشبع (saturation) والصبغة (hue) والشفافية. تُحدَّد الخاصيات على شكل وسائط مُسمّاة. وتُعوَِّض القيم الحالية لتلك الخاصيات في اللون.
جميع الخاصيات اختيارية. كما لا يمكنك تحديد خاصيات RGB (أي $redو $green و $blue) و خاصيات HSL (أي $saturation و $value) في نفس الوقت.
البنية العامة
scale_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
المعاملات
$color
اللون المراد تعديله.
$red
التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين 0 و 255 مشمولة.
$green
التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين 0 و 255 مشمولة.
$blue
التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين 0 و 255 مشمولة.
$hue
التعديل المُراد تطبيقه على الصبغة، وحدتها deg.
$saturation
التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين 0% و 100% مشمولة.
$lightness
التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين 0% و 100% مشمولة.
$alpha
التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين 0 و 1 مشمولة.
القيم المعادة
قيمة لونية بعد التعديل.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت.
أمثلة
مثال عن استخدام الدالة change_color() لضبط قيمة اللون (color) ولون الخلفية (background-color):
selector {
background-color: change-color(#102030, $blue: 5) // #102005
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) // hsla(25, 100%, 40%, 0.8)
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
selector {
background-color: #102005;
color: hsla(25, 100%, 40%, 0.8);
}
انظر أيضًا
- الدالة
scale_color(): تغير قيمة الصبغة (hue).
- الدالة
adjust_hue(): تغير قيمة الصبغة (hue). - الدالة
adjust_color(): تغير قيمة الصبغة (hue).