الفرق بين المراجعتين ل"Sass/adjust color"
ط (تعديل عنوان الصفحة) |
ط (استبدال النص - 'توثيق Sass الرسمي.]' ب'توثيق Sass الرسمي].') |
||
(6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 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> أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. يمكنها أن تُغيّر شفافيَّة وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصِّيَّات على شكل [[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> و <code>$alpha</code>) في نفس الوقت. |
== البنية العامة == | == البنية العامة == | ||
سطر 12: | سطر 12: | ||
=== <code>$color</code> === | === <code>$color</code> === | ||
− | اللون المراد | + | اللون المراد تعديل مكوناته. |
=== <code>$red</code> === | === <code>$red</code> === | ||
− | + | قيمة المكوِّن الأحمر المراد تعديله، وتتراوح بين -255 و 255. | |
=== <code>$green</code> === | === <code>$green</code> === | ||
− | + | قيمة المكوِّن الأخضر المراد تعديله، وتتراوح بين -255 و 255. | |
=== <code>$blue</code> === | === <code>$blue</code> === | ||
− | + | قيمة المكوِّن الأزرق المراد تعديله، وتترواح بين -255 و 255. | |
=== <code>$hue</code> === | === <code>$hue</code> === | ||
− | + | قيمة مكوِّن الصبغة (hue) المراد تعديلها، وتكون هذه القيمة بالدرجات. | |
=== <code>$saturation</code> === | === <code>$saturation</code> === | ||
− | + | قيمة مكوِّن الإشباع المراد تعديله، ,ويتراوح بين -100% و 100%. | |
=== <code>$lightness</code> === | === <code>$lightness</code> === | ||
− | + | قيمة مكوِّن السطوع المراد تعديلها، وتترواح بين -100% و 100%. | |
=== <code>$alpha</code> === | === <code>$alpha</code> === | ||
− | + | قيمة مكوِّن قناة الشفافيَّة المراد تعديلها، وتترواح بين -1 و 1. | |
== القيم المعادة == | == القيم المعادة == | ||
− | قيمة | + | تُعاد قيمة لونيَّة بعد التعديل. |
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
− | سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع | + | سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخطأ، أو خارج المجال المقبول، أو إذا عُدّلت خاصِّيَّات RGB وخاصِّيَّات HSL في نفس الوقت. |
== أمثلة == | == أمثلة == | ||
− | مثال عن استخدام الدالة <code>adjust_color()</code> مع [[CSS/color value|قيمة | + | مثال عن استخدام الدالة <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 | |
− | + | color: adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4); // rgba(255, 106, 0, 0.6); | |
} | } | ||
− | |||
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | </syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | ||
.selector { | .selector { | ||
− | + | background-color: #0b2035; | |
− | + | color: rgba(255, 106, 0, 0.6); } | |
− | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | == انظر أيضًا == | ||
− | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: | + | * الدالة <code>[[Sass/scale color|()scale_color]]</code>: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales). |
− | * الدالة <code>[[Sass/alpha|alpha()]]</code>: تُعيد قيمة مكون | + | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغيِّر قيمة الصبغة. |
+ | * الدالة <code>[[Sass/alpha|alpha()]]</code>: تُعيد قيمة مكون قناة الشفافيَّة (alpha). | ||
+ | * الدالة <code>[[Sass/alpha|hsl()]]</code>: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والسطوع. | ||
== مصادر == | == مصادر == | ||
− | * [https://sass-lang.com/documentation/Sass/Script/Functions.html# | + | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#adjust_color-instance_method قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي]. |
− | [[تصنيف:Sass]] | + | [[تصنيف:Sass|{{SUBPAGENAME}}]] |
− | [[تصنيف: Sass Function]] | + | [[تصنيف: Sass Function|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 07:01، 20 مايو 2018
تزيد الدالة adjust_color()
أو تقلِّل خاصِّيَّة واحدة أو أكثر من خاصِّيَّات لون محدَّد. يمكنها أن تُغيّر شفافيَّة وتشبّع وقيمة اللون الأحمر والأخضر والأزرق. تُحدّد الخاصِّيَّات على شكل وسائط مُسمّاة لتُضاف أو تُنقص من القيمة الحاليَّة لخاصِّيَّة اللون تلك.
جميع الخاصِّيّات اختياريِّة. على أي حال، لا يمكنك تحديد كلّ من خاصِّيَّات RGB ($red
و $green
و $blue
) وخاصِّيَّات HSL ($hue
و $saturation
و $lightness
و $alpha
) في نفس الوقت.
البنية العامة
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 في نفس الوقت.
أمثلة
مثال عن استخدام الدالة 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); // rgba(255, 106, 0, 0.6);
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
background-color: #0b2035;
color: rgba(255, 106, 0, 0.6); }
انظر أيضًا
- الدالة
()scale_color
: تعدِّل مكوِّنًا واحدًا أو أكثر للون الممرَّر إليها بتدرج انسيابي (Fluidly scales). - الدالة
adjust_hue()
: تغيِّر قيمة الصبغة. - الدالة
alpha()
: تُعيد قيمة مكون قناة الشفافيَّة (alpha). - الدالة
hsl()
: تُنشئ لونًا انطلاقًا من قيم الصبغة والتشبُّع والسطوع.