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

مراجعة 03:19، 21 أبريل 2018

تجعل الدالة ()darken اللون أكثر ظلمة. وتأخذ لونا وعددا بين ‎0% و ‎100%.وتعيد لونًا بعد تقليل الإضاءة.

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

darken($color, $amount)

المعاملات

`‎$color`

قيمة لونية.

‎$amount

مقدار تقليل الإضاءة، قيمته تكون بين ‎0% و ‎100%.

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

اللون المُعدّل.

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

سيُرمى الخطأ ArgumentError إن كان أحد المعاملات من النوع الخطأ، أو إن كان ‎$amount خارج الحدود.

أمثلة

مثال عن استخدام الدالة darken()‎ لضبط قيمة اللون (color) ولون الخلفية (background-color):

.selector {
  color: darken(hsla(25, 100%, 80%, 0.2), 30%); // rgba(255, 106, 0, 0.2)
  background-color: darken(#800, 20%); // #220000
}

سيُصرّف المثال السابق إلى شيفرة CSS الآتية:

.selector {
  color: rgba(255, 106, 0, 0.2);
  background-color: #220000;
}

انظر أيضًا

الدالة hsla()‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع والإضاءة والشفافية.
الدالة hsl()‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع والإضاءة.
الدالة hue()‎: تُعيدُ الدالة مُكوّن الصبغة الخاص باللون.
الدالة lighten()‎: تجعل اللون أكثر إضاءةً.

مصادر

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

@@ سطر 22: / سطر 22: @@
 == أمثلة ==
-مثال عن استخدام الدالة <code>darken()‎</code> لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<syntaxhighlight lang="sass">
+مثال عن استخدام الدالة <code>darken()‎</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass">
 .selector {
-   color: darken(hsl(25, 100%, 80%), 30%) // hsl(25, 100%, 50%)
+  color: darken(hsla(25, 100%, 80%, 0.2), 30%); // rgba(255, 106, 0, 0.2)
-   background-color: darken(#800, 20%) // #200
+  background-color: darken(#800, 20%); // #220000
 }
 </syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة <code>CSS</code> الآتية:<syntaxhighlight lang="css">
 .selector {
-   color:  hsl(0, 0, 30);
+  color: rgba(255, 106, 0, 0.2);
-   background-color: #e00;
+  background-color: #220000;
 }
 </syntaxhighlight>
 == انظر أيضًا ==
-* الدالة <code>[[Sass/hsla|'''hsla'''()]]</code>‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع  والإضاءة والشفافية.
+* الدالة <code>[[Sass/hsla|hsla()]]</code>‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع  والإضاءة والشفافية.
-* الدالة <code>[[Sass/hsl|'''hsl'''()]]</code>‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع  والإضاءة والشفافية.
+* الدالة <code>[[Sass/hsl|hsl()]]</code>‎: تُنشئ لونًا انطلاقا من قيم الصبغة والتشبع  والإضاءة.
 * الدالة <code>[[Sass/hue|hue()]]</code>‎: تُعيدُ الدالة مُكوّن الصبغة الخاص باللون.
 * الدالة <code>[[Sass/lighten|lighten()]]</code>‎: تجعل اللون أكثر إضاءةً.