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

مراجعة 02:47، 21 أبريل 2018

تغيّر الدالة ()change_color خاصيات اللون: الأحمر والأخضر والأزرق والتشبع (saturation) والصبغة (hue) والشفافية. تُحدَّد الخاصيات على شكل وسائط مُسمّاة. وتُعوَِّض القيم الحالية لتلك الخاصيات في اللون.

جميع الخاصيات اختيارية. كما لا يمكنك تحديد خاصيات RGB (أي ‎ $redو ‎$green و ‎$blue) و خاصيات HSL (أي ‎$saturation و ‎$value) في نفس الوقت.

البنية العامة

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 مشمولة.

القيم المعادة

قيمة لونية بعد التعديل.

الأخطاء والاستثناءات

سيُرمى الخطأ 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()‎: تغير قيمة اللون.

الدالة adjust_hue()‎: تغير قيمة الصبغة (hue).
الدالة adjust_color()‎: تغير قيمة اللون.

مصادر

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

@@ سطر 42: / سطر 42: @@
 == أمثلة ==
-مثال عن استخدام الدالة <code>'''change_color'''()‎</code>  لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<syntaxhighlight lang="sass">
+مثال عن استخدام الدالة <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
-  color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) // hsla(25, 100%, 40%, 0.8)
+  color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8); // rgba(204, 85, 0, 0.8)
 }
 </syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css">
-selector {
+.selector {
-  background-color: #102005;
+  background-color: #102005;
-  color: hsla(25, 100%, 40%, 0.8);
+  color: rgba(204, 85, 0, 0.8);
 }
 </syntaxhighlight>
 == انظر أيضًا ==
-* الدالة <code>[[Sass/scale color|'''scale_color'''()‎]]</code>: تغير قيمة الصبغة (hue).
+* الدالة <code>[[Sass/scale color|scale_color()‎]]</code>: تغير قيمة اللون.
 * الدالة <code>[[Sass/adjust hue|adjust_hue()‎]]</code>: تغير قيمة الصبغة (hue).
-* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تغير قيمة الصبغة (hue).
+* الدالة <code>[[Sass/adjust color|adjust_color()‎]]</code>: تغير قيمة اللون.
 == مصادر ==