الدالة ()red في Sass
تعيد الدالة ()red قيمة المكوِّن الأحمر للون الممرَّر إليها. تُحسب القيمة من الصيغة HSL عند الضرورة عبر هذه الخوارزمية.
البنية العامة
red($color)
المعاملات
$color
اللون المراد الحصول على قيمة مكوِّنه الأحمر.
القيم المعادة
تُعاد قيمة المكوِّن الأحمر للون $color، وتتراوح بين 0 و 255.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إن لم يكن المعامل $color لونًا.
أمثلة
إحدى طرائق التحقق أنَّ اللون فاتح أو غامق هو التحقق من قيمة السطوع (الدالة lightness())، وعلى الرغم من أنَّ هذه الطريقة صحيحة تقنيًا، لكنها قد تؤدي إلى نتائج غير صحيحة لأنَّ العين البشرية حساسة لبعض الألوان أكثر من غيرها. يمكن أن يوظَّف ذلك في تحديد لون مناسب للخلفية (نص فاتح على خلفية غامقة، أو نص غامق على خلفية فاتحة).
لهذا السبب يُستخدَم مجال الألوان YQI الذي يأخذ ما سبق بالحسبان. ويمكن تحويل لون RGB إلى مجال الألوان YQI بضرب قيمة المكوِّن الأحمر (الدالة red()) بالعدد 299، وضرب قيمة المكوِّن الأخضر (الدالة green()) بالعدد 587، وقيمة المكوِّن الأزرق (الدالة blue()) بالعدد 114، ثم قسمة مجموعها على 1000.
الدالة color-yiq الآتية تُقبل لونًا كوسيط، وتستعمل الشرط @if لإعادة لون فاتح ($light) إذا كان اللون المُمرَّر إلى الدالة غامقًا، وإعادة لون غامق ($dark) إذا كان اللون المُمرَّر إلى الدالة فاتحًا:
// القيمة التي تفصل بين الألوان الفاتحة والغامقة، يجب أن تكون بين 0 و 255
$yiq-contrasted-threshold: 150 !default;
$dark: #333; // اللون الغامق
$light: rgb(240, 240, 240); // اللون الفاتح
@function color-yiq($color) {
$r: red($color); // المكون الأحمر للون
$g: green($color); // المكون الأخضر للون
$b: blue($color); // المكون الأزرق للون
// تحويل اللون إلى مجال الألوان YIQ
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
} @else {
@return $light;
}
}
// لون النص فاتح، ويكون لون الخلفية غامقًا
.light-color {
color: salmon;
background-color: color-yiq(salmon); // #333
}
// لون النص غامق، ويكون لون الخلفية فاتحًا
.dark-color {
color: seagreen;
background-color: color-yiq(seagreen); // #f0f0f0
}
ستُصرَّف شيفرة Sass السابقة إلى شيفرة CSS الآتية:
.light-color {
color: salmon;
background-color: #333; }
.dark-color {
color: seagreen;
background-color: #f0f0f0; }
انظر أيضًا
- الدالة
green(): تعيد قيمة المكوِّن الأخضر للون الممرَّر إليها. - الدالة
()blue: تعيد قيمة المكوِّن الأزرق للون الممرَّر إليها. - الدالة
hue(): تُعيدُ قيمة مُكوّن الصبغة للون الممرَّر إليها. - الدالة
saturation(): تُعيدُ قيمة مُكوّن التشبع للون الممرَّر إليها. - الدالة
()lightness: تُعيدُ قيمة مُكوّن السطوع للون الممرَّر إليها. - لدالة
alpha(): تعيد قيمة مكوّن قناة الشفافيَّة (alpha) للون الممرَّر إليها. - الدالة
hsl(): تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبع والسطوع.