الدالة ()blue في Sass
تعيد الدالة ()blue المكوِّن الأزرق للون الممرَّر إليها. قد تُحسب قيمته من الصيغة HSL عند الضرورة عبر هذه الخوارزمية.
البنية العامة
blue($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; }
انظر أيضًا
- الدالة
red(): تعيد المكوِّن الأحمر للون الممرَّر إليها. - الدالة
green(): تعيد المكوِّن الأخضر للون الممرَّر إليها. - الدالة
alpha(): تعيد قيمة مكوّن الشفافيَّة (opacity) للون الممرَّر إليها. - الدالة
saturation(): تُعيدُ قيمة مُكوّن التشبع للون الممرَّر إليها. - الدالة
()lightness: تُعيدُ قيمة مُكوّن السطوع للون الممرَّر إليها. - الدالة
adjust_color(): تغيِّر قيم خاصِّيَّات اللون.