الفرق بين المراجعتين ل"Sass/red"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
سطر 17: سطر 17:
 
== الأخطاء والاستثناءات ==
 
== الأخطاء والاستثناءات ==
 
سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن المعامل ‎<code>$color</code> لونًا.
 
سيُرمى الخطأ <code>ArgumentError</code> إن لم يكن المعامل ‎<code>$color</code> لونًا.
 +
==أمثلة==
 +
إحدى طرائق التحقق أنَّ اللون فاتح أو غامق هو التحقق من قيمة السطوع (الدالة <code>[[Sass/lightness|lightness()‎]]</code>)، وعلى الرغم من أنَّ هذه الطريقة صحيحة تقنيًا، لكنها قد تؤدي إلى نتائج غير صحيحة لأنَّ العين البشرية حساسة لبعض الألوان أكثر من غيرها. يمكن أن يوظَّف ذلك في تحديد لون مناسب للخلفية (نص فاتح على خلفية غامقة، أو نص غامق على خلفية فاتحة).
  
 +
لهذا السبب يُستخدَم [[wikipedia:YIQ|مجال الألوان YQI]] الذي يأخذ ما سبق بالحسبان. ويمكن تحويل لون RGB إلى مجال الألوان YQI بضرب قيمة المكوِّن الأحمر (الدالة <code>red()‎</code>) بالعدد 299، وضرب قيمة المكوِّن الأخضر (الدالة <code>[[Sass/green|green()‎]]</code>) بالعدد 587، وقيمة المكوِّن الأزرق (الدالة <code>[[Sass/blue|blue()‎]]</code>) بالعدد 114، ثم قسمة مجموعها على 1000.
 +
 +
[[Sass/function directives|الدالة]] <code>color-yiq</code> الآتية تُقبل لونًا كوسيط، وتستعمل الشرط ‎<code>[[Sass/control directives#.E2.80.8E.40if|@if]]</code> لإعادة لون فاتح (‎<code>$light</code>) إذا كان اللون المُمرَّر إلى الدالة غامقًا، وإعادة لون غامق (‎<code>$dark</code>) إذا كان اللون المُمرَّر إلى الدالة فاتحًا:<syntaxhighlight lang="sass">
 +
// القيمة التي تفصل بين الألوان الفاتحة والغامقة، يجب أن تكون بين 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
 +
}
 +
</syntaxhighlight>ستُصرَّف شيفرة Sass السابقة إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
 +
.light-color {
 +
  color: salmon;
 +
  background-color: #333; }
 +
 +
.dark-color {
 +
  color: seagreen;
 +
  background-color: #f0f0f0; }
 +
</syntaxhighlight>
 
== انظر أيضًا ==
 
== انظر أيضًا ==
 
* الدالة <code>[[Sass/green|green()]]‎</code>: تعيد قيمة المكوِّن الأخضر للون الممرَّر إليها.
 
* الدالة <code>[[Sass/green|green()]]‎</code>: تعيد قيمة المكوِّن الأخضر للون الممرَّر إليها.

مراجعة 11:57، 17 مايو 2018

تعيد الدالة ()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()‎: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبع والسطوع.

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Sass/red&oldid=8424"