الفرق بين المراجعتين لصفحة: «Sass/adjust color»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 48: | سطر 48: | ||
} | } | ||
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة CSS الآتية:<syntaxhighlight lang="css"> | </syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | ||
.selector { | .selector { | ||
background-color: #0b2035; | background-color: #0b2035; | ||
مراجعة 15:26، 17 أبريل 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 في نفس الوقت.
أمثلة
مثال عن استخدام الدالة 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(): تغير قيمة الصبغة (hue). - الدالة
alpha(): تُعيد قيمة مكون الشفافية (alpha).