الفرق بين المراجعتين لصفحة: «Sass/adjust color»

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

مصادر

قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي.

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