الفرق بين المراجعتين ل"Sass/change color"
< Sass
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة الصفحة وتدقيقها.) |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>change_color()</code> في Sass}}</noinclude> | ||
| − | تغيّر الدالة <code>()change_color</code> | + | تغيّر الدالة <code>()change_color</code> خاصِّيَّة واحدة أو أكثر من خاصِّيَّات اللون المعطى وهي: الأحمر والأخضر والأزرق والتشبُّع (saturation) والصبغة (hue) والشفافيَّة. تُحدَّد الخاصِّيَّات على شكل وسائط مُسمّاة، وتُعوَِّض القيم الممرَّرة مكان القيم الحاليَّة لتلك الخاصِّيَّات في اللون. |
| − | |||
| − | |||
| + | جميع الخاصِّيَّات اختياريَّة. مع ذلك، لا يمكنك تغيير خاصِّيَّات RGB (أي الخاصِّيَّة <code>$red</code>و <code>$green</code> و <code>$blue</code>) و خاصّيَّات HSL (أي الخاصِّيَّة <code>$hue</code> و <code>$saturation</code> و <code>$lightness</code>) في نفس الوقت. | ||
== البنية العامة == | == البنية العامة == | ||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
| سطر 15: | سطر 14: | ||
=== <code>$red</code> === | === <code>$red</code> === | ||
| − | + | قيمة المكوِّن الأحمر الجديدة، وتتراوح بين 0 و 255 مشمولة. | |
=== <code>$green</code> === | === <code>$green</code> === | ||
| − | + | قيمة المكوِّن الأخضر الجديدة، وتتراوح بين 0 و 255 مشمولة. | |
=== <code>$blue</code> === | === <code>$blue</code> === | ||
| − | + | قيمة المكوِّن الأزرق الجديدة، وتتراوح بين 0 و 255 مشمولة. | |
=== <code>$hue</code> === | === <code>$hue</code> === | ||
| − | + | قيمة مكوِّن الصبغة الجديدة، وواحدتها الدرجات ((deg. | |
=== <code>$saturation</code> === | === <code>$saturation</code> === | ||
| − | + | قيمة مكوِّن الإشباع الجديدة، وتتراوح بين 0% و 100% مشمولة. | |
=== <code>$lightness</code> === | === <code>$lightness</code> === | ||
| − | + | قيمة مكوِّن الإضاءة الجديدة، وتتراوح بين 0% و 100% مشمولة. | |
=== <code>$alpha</code> === | === <code>$alpha</code> === | ||
| − | + | قيمة مكوِّن الشفافيَّة الجديدة، وتتراوح بين 0 و 1 مشمولة. | |
== القيم المعادة == | == القيم المعادة == | ||
| − | + | يُعاد اللون <code>$color</code> بعد تغيير قيم مكوناته. | |
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
| − | سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع | + | سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخطأ، أو خارج المجال المقبول، أو إذا عُدّلت خاصِّيَّات RGB وخاصِّيَّات HSL في نفس الوقت. |
== أمثلة == | == أمثلة == | ||
| − | + | المثال 1: استخدام الدالة <code>change_color()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>).<syntaxhighlight lang="sass"> | |
.selector { | .selector { | ||
background-color: change-color(#102030, $blue: 5); // #102005 | background-color: change-color(#102030, $blue: 5); // #102005 | ||
| سطر 59: | سطر 58: | ||
* الدالة <code>[[Sass/scale color|scale_color()]]</code>: تغير قيمة اللون. | * الدالة <code>[[Sass/scale color|scale_color()]]</code>: تغير قيمة اللون. | ||
| − | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: | + | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تعدِّل قيمة الصبغة (hue). |
| − | * الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: | + | * الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تعدِّل قيمة اللون. |
== مصادر == | == مصادر == | ||
مراجعة 14:19، 2 مايو 2018
تغيّر الدالة ()change_color خاصِّيَّة واحدة أو أكثر من خاصِّيَّات اللون المعطى وهي: الأحمر والأخضر والأزرق والتشبُّع (saturation) والصبغة (hue) والشفافيَّة. تُحدَّد الخاصِّيَّات على شكل وسائط مُسمّاة، وتُعوَِّض القيم الممرَّرة مكان القيم الحاليَّة لتلك الخاصِّيَّات في اللون.
جميع الخاصِّيَّات اختياريَّة. مع ذلك، لا يمكنك تغيير خاصِّيَّات RGB (أي الخاصِّيَّة $redو $green و $blue) و خاصّيَّات HSL (أي الخاصِّيَّة $hue و $saturation و $lightness) في نفس الوقت.
البنية العامة
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 مشمولة.
القيم المعادة
يُعاد اللون $color بعد تغيير قيم مكوناته.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إذا كان أيٌّ من المعاملات من النوع الخطأ، أو خارج المجال المقبول، أو إذا عُدّلت خاصِّيَّات RGB وخاصِّيَّات HSL في نفس الوقت.
أمثلة
المثال 1: استخدام الدالة 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); // rgba(204, 85, 0, 0.8)
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
background-color: #102005;
color: rgba(204, 85, 0, 0.8);
}
انظر أيضًا
- الدالة
scale_color(): تغير قيمة اللون.
- الدالة
adjust_hue(): تعدِّل قيمة الصبغة (hue). - الدالة
adjust_color(): تعدِّل قيمة اللون.