الفرق بين المراجعتين ل"Sass/adjust color"
< Sass
اذهب إلى التنقل
اذهب إلى البحث
ط (تعديل عنوان الصفحة) |
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة الصفحة وتدقيقها.) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>adjust_color()</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>adjust_color()</code> في Sass}}</noinclude> | ||
| − | تزيد الدالة <code>adjust_color</code> أو | + | تزيد الدالة <code>adjust_color()</code> أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. يمكنها أن تُغيّر شفافيَّة وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصِّيَّات على شكل وسائط مُسمّاة لتُضاف أو تُنقص من القيمة الحاليَّة لخاصِّيَّة اللون تلك. |
| − | جميع | + | جميع الخاصِّيّات اختياريِّة. على أي حال، لا يمكنك تحديد كلّ من خاصِّيَّات RGB (<code>$red</code> و <code>$green</code> و <code>$blue</code>) وخاصيات HSL (<code>$hue</code> و <code>$saturation</code> و <code>$value</code>) في نفس الوقت. |
== البنية العامة == | == البنية العامة == | ||
| سطر 12: | سطر 12: | ||
=== <code>$color</code> === | === <code>$color</code> === | ||
| − | اللون المراد | + | اللون المراد تعديل مكوناته. |
=== <code>$red</code> === | === <code>$red</code> === | ||
| − | + | قيمة المكوِّن الأحمر المراد تعديله، وتتراوح بين <code>-255</code> و <code>255</code> مشمولة. | |
=== <code>$green</code> === | === <code>$green</code> === | ||
| − | + | قيمة المكوِّن الأخضر المراد تعديله، وتتراوح بين <code>-255</code> و <code>255</code> مشمولة. | |
=== <code>$blue</code> === | === <code>$blue</code> === | ||
| − | + | قيمة المكوِّن الأزرق المراد تعديله، وتترواح بين <code>-255</code> و <code>255</code> مشمولة. | |
=== <code>$hue</code> === | === <code>$hue</code> === | ||
| − | + | قيمة مكوِّن الصبغة (hue) المراد تعديلها، وتكون هذه القيمة بالدرجات. | |
=== <code>$saturation</code> === | === <code>$saturation</code> === | ||
| − | + | قيمة مكوِّن الإشباع المراد تعديله، ,ويتراوح بين <code>-100%</code> و <code>100%</code> مشمولة. | |
=== <code>$lightness</code> === | === <code>$lightness</code> === | ||
| − | + | قيمة مكوِّن الإضاءة المراد تعديلها، وتترواح بين <code>-100%</code> و <code>100%</code> مشمولة. | |
=== <code>$alpha</code> === | === <code>$alpha</code> === | ||
| − | + | قيمة مكوِّن الشفافيَّة المراد تعديلها، وتترواح بين <code>-1</code> و <code>1</code> مشمولة. | |
== القيم المعادة == | == القيم المعادة == | ||
| − | قيمة | + | تُعاد قيمة لونيَّة بعد التعديل. |
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
| − | سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع | + | سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخطأ، أو خارج المجال المقبول، أو إذا عُدّلت خاصِّيَّات RGB وخاصِّيَّات HSL في نفس الوقت. |
== أمثلة == | == أمثلة == | ||
| − | + | المثال 1: استخدام الدالة <code>adjust_color()</code> مع [[CSS/color value|قيمة لونيَّة]] بالنظام الست عشري، وأخرى باستخدام الدالة <code>[[Sass/hsl|hsl()]]</code>.<syntaxhighlight lang="sass"> | |
selector { | selector { | ||
background-color: adjust-color(#102030, $red: -5, $blue: 5); // #0b2035 | background-color: adjust-color(#102030, $red: -5, $blue: 5); // #0b2035 | ||
| سطر 56: | سطر 56: | ||
== انظر أيضًا == | == انظر أيضًا == | ||
| − | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: | + | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغيِّر قيمة الصبغة. |
| − | * الدالة <code>[[Sass/alpha|alpha()]]</code>: تُعيد قيمة مكون | + | * الدالة <code>[[Sass/alpha|alpha()]]</code>: تُعيد قيمة مكون الشفافيَّة (alpha). |
| + | * الدالة [[Sass/hsl|<code></code>]]<code>[[Sass/alpha|hsl()]]</code>: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبُّع والإضاءة. | ||
== مصادر == | == مصادر == | ||
مراجعة 12:42، 2 مايو 2018
تزيد الدالة adjust_color() أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. يمكنها أن تُغيّر شفافيَّة وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصِّيَّات على شكل وسائط مُسمّاة لتُضاف أو تُنقص من القيمة الحاليَّة لخاصِّيَّة اللون تلك.
جميع الخاصِّيّات اختياريِّة. على أي حال، لا يمكنك تحديد كلّ من خاصِّيَّات RGB ($red و $green و $blue) وخاصيات HSL ($hue و $saturation و $value) في نفس الوقت.
البنية العامة
adjust_color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
المعاملات
$color
اللون المراد تعديل مكوناته.
$red
قيمة المكوِّن الأحمر المراد تعديله، وتتراوح بين -255 و 255 مشمولة.
$green
قيمة المكوِّن الأخضر المراد تعديله، وتتراوح بين -255 و 255 مشمولة.
$blue
قيمة المكوِّن الأزرق المراد تعديله، وتترواح بين -255 و 255 مشمولة.
$hue
قيمة مكوِّن الصبغة (hue) المراد تعديلها، وتكون هذه القيمة بالدرجات.
$saturation
قيمة مكوِّن الإشباع المراد تعديله، ,ويتراوح بين -100% و 100% مشمولة.
$lightness
قيمة مكوِّن الإضاءة المراد تعديلها، وتترواح بين -100% و 100% مشمولة.
$alpha
قيمة مكوِّن الشفافيَّة المراد تعديلها، وتترواح بين -1 و 1 مشمولة.
القيم المعادة
تُعاد قيمة لونيَّة بعد التعديل.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إذا كان أيٌّ من المعاملات من النوع الخطأ، أو خارج المجال المقبول، أو إذا عُدّلت خاصِّيَّات RGB وخاصِّيَّات HSL في نفس الوقت.
أمثلة
المثال 1: استخدام الدالة adjust_color() مع قيمة لونيَّة بالنظام الست عشري، وأخرى باستخدام الدالة hsl().
selector {
background-color: adjust-color(#102030, $red: -5, $blue: 5); // #0b2035
color: adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4); // hsla(25, 100%, 50%, 0.6)
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
background-color: #0b2035;
color: hsla(25, 100%, 50%, 0.6);
}
انظر أيضًا
- الدالة
adjust_hue(): تغيِّر قيمة الصبغة. - الدالة
alpha(): تُعيد قيمة مكون الشفافيَّة (alpha). - الدالة
hsl(): تُنشئ لونًا انطلاقا من قيم الصبغة والتشبُّع والإضاءة.