الفرق بين المراجعتين لصفحة: «Sass/change color»
طلا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>change_color()</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>change_color()</code> في Sass}}</noinclude> | ||
تغيّر الدالة <code>()change_color</code> خاصِّيَّة واحدة أو أكثر من خاصِّيَّات اللون المعطى وهي: الأحمر والأخضر والأزرق والتشبُّع (saturation) والصبغة (hue) والشفافيَّة. تُحدَّد الخاصِّيَّات على شكل وسائط | تغيّر الدالة <code>()change_color</code> خاصِّيَّة واحدة أو أكثر من خاصِّيَّات اللون المعطى وهي: الأحمر والأخضر والأزرق والتشبُّع (saturation) والصبغة (hue) والشفافيَّة. تُحدَّد الخاصِّيَّات على شكل [[Sass/SassScript#.D8.A7.D9.84.D9.88.D8.B3.D8.A7.D8.A6.D8.B7 .D8.A7.D9.84.D9.85.D8.B3.D9.85.D9.91.D8.A7.D8.A9 .28Keyword Arguments.29|وسائط مُسمّاة]]، وتُعوَِّض القيم الممرَّرة مكان القيم الحاليَّة لتلك الخاصِّيَّات في اللون. | ||
جميع الخاصِّيَّات اختياريَّة. مع ذلك، لا يمكنك تغيير خاصِّيَّات RGB (أي الخاصِّيَّة <code>$red</code>و <code>$green</code> و <code>$blue</code>) و خاصّيَّات HSL (أي الخاصِّيَّة <code>$hue</code> و <code>$saturation</code> و <code>$lightness</code>) في نفس الوقت. | جميع الخاصِّيَّات اختياريَّة. مع ذلك، لا يمكنك تغيير خاصِّيَّات RGB (أي الخاصِّيَّة <code>$red</code>و <code>$green</code> و <code>$blue</code>) و خاصّيَّات HSL (أي الخاصِّيَّة <code>$hue</code> و <code>$saturation</code> و <code>$lightness</code> و <code>$alpha</code>) في نفس الوقت. | ||
== البنية العامة == | == البنية العامة == | ||
<syntaxhighlight lang="sass"> | <syntaxhighlight lang="sass"> | ||
| سطر 26: | سطر 26: | ||
=== <code>$saturation</code> === | === <code>$saturation</code> === | ||
قيمة مكوِّن الإشباع الجديدة، وتتراوح بين 0% و 100% | قيمة مكوِّن الإشباع الجديدة، وتتراوح بين 0% و 100%. | ||
=== <code>$lightness</code> === | === <code>$lightness</code> === | ||
قيمة مكوِّن | قيمة مكوِّن السطوع الجديدة، وتتراوح بين 0% و 100%. | ||
=== <code>$alpha</code> === | === <code>$alpha</code> === | ||
قيمة مكوِّن الشفافيَّة الجديدة، وتتراوح بين 0 و 1 | قيمة مكوِّن قناة الشفافيَّة الجديدة، وتتراوح بين 0 و 1. | ||
== القيم المعادة == | == القيم المعادة == | ||
| سطر 53: | سطر 53: | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* | * الدالة <code>[[Sass/scale color|()scale_color]]</code>: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales). | ||
* الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تعدِّل قيمة الصبغة (hue). | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تعدِّل قيمة الصبغة (hue). | ||
* الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تعدِّل قيمة اللون. | * الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تعدِّل قيمة اللون. | ||
== مصادر == | == مصادر == | ||
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#change_color-instance_method قسم الدالة change_color في صفحة الدوال في توثيق Sass الرسمي. | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#change_color-instance_method قسم الدالة change_color في صفحة الدوال في توثيق Sass الرسمي]. | ||
[[تصنيف:Sass]] | [[تصنيف:Sass|{{SUBPAGENAME}}]] | ||
[[تصنيف: Sass Function]] | [[تصنيف: Sass Function|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 07:01، 20 مايو 2018
تغيّر الدالة ()change_color خاصِّيَّة واحدة أو أكثر من خاصِّيَّات اللون المعطى وهي: الأحمر والأخضر والأزرق والتشبُّع (saturation) والصبغة (hue) والشفافيَّة. تُحدَّد الخاصِّيَّات على شكل وسائط مُسمّاة، وتُعوَِّض القيم الممرَّرة مكان القيم الحاليَّة لتلك الخاصِّيَّات في اللون.
جميع الخاصِّيَّات اختياريَّة. مع ذلك، لا يمكنك تغيير خاصِّيَّات RGB (أي الخاصِّيَّة $redو $green و $blue) و خاصّيَّات HSL (أي الخاصِّيَّة $hue و $saturation و $lightness و $alpha) في نفس الوقت.
البنية العامة
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 في نفس الوقت.
أمثلة
مثال عن استخدام الدالة 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: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales). - الدالة
adjust_hue(): تعدِّل قيمة الصبغة (hue). - الدالة
adjust_color(): تعدِّل قيمة اللون.