الدالة mix()‎ في Sass

من موسوعة حسوب

تمزج الدالة mix()‎ بين لونين. على وجه التحديد، فهي تأخذ متوسط كل مكون من مكونات RGB، موزونة (اختياريًا) بنسبة مئوية معيّنة. تؤخذ شفافية اللون بالحُسبان عند تعديل وترجيح المكونات.

يحدد الوزن المقدار الذي يجب تضمينه من اللون الأول في اللون الناتج. ويساوي افتراضيًا ‎50%‎، يعني أنه يجب استخدام نصف اللون الأول ونصف اللون الثاني. أما ‎25%‎ فتعني أنه يجب استخدام ربع اللون الأول وثلاثة أرباع اللون الثاني.

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

mix($color1, $color2, $weight: 50%)

المعاملات

‎$color1

اللون الأول.

‎$color2

اللون الثاني.

‎$weight

الوزن النسبي لكل لون. إن كان أقرب إلى ‎100%‎ فسيُعطي وزنًا أكبر للون ‎$color1، والعكس بالعكس.

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

اللون الممزوج.

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

سيُرمى الخطأ ArgumentError إن كان أحد المعاملات من النوع الخاطئ أو كان ‎$weight خارج الحدود.

أمثلة

مثال عن استخدام الدالة mix()‎ لضبط قيمة اللون (color) ولون الخلفية (background-color):

.selector {
   color: mix(#f00, #00f); // #7f007f
   background-color: mix(rgba(255, 0, 0, 0.5), #00f); // rgba(63, 0, 191, 0.75)
}

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

.selector {
   color: #7f007f;
   background-color: rgba(63, 0, 191, 0.75);
}

انظر أيضًا

  • الدالة rgb()‎:  تُنشئ لونًا انطلاقًا من المركبات اللونية الثلاث.
  • الدالة rgba()‎:  تُنشئ لونًا انطلاقًا من المركبات اللونية الثلاث والشفافية.

مصادر