الفرق بين المراجعتين لصفحة: «Sass/scale color»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>scale_color()</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>scale_color()</code> في Sass}}</noinclude> | ||
تقوم الدالة <code>()scale_color</code> بالتعديل السائل (Fluidly scales) لخاصية واحدةٍ أو أكثر للّون. على عكس الدالة <code>[[Sass/adjust color|adjust_color]]</code>، التي تُغير خاصيات اللون بمقادير | تقوم الدالة <code>()scale_color</code> بالتعديل السائل (Fluidly scales) لخاصية واحدةٍ أو أكثر للّون. على عكس الدالة <code>[[Sass/adjust color|adjust_color()]]</code>، التي تُغير خاصيات اللون بمقادير ثابتة، فإن <code>()scale_color</code> تُغيرها بناءً على مدى ارتفاعها أو انخفاضها. هذا يعني أن إضاءة لون ساطعٍ بالفعل بواسطة <code>()scale_color</code>لن يغير من السطوع كثيرًا ، ولكن إضاءة لون داكن بنفس المقدار سيغيرها بشكل أكثر حدة. هذا سيجعل للدالة <code>scale-color($color, ...)</code> نفس التأثير بغض النظر عن اللون. | ||
على سبيل المثال ، إضاءة اللون تكون بين <code>0%</code> و <code>100%</code>. إذا استدعيت <code>scale-color($color, $lightness: 40%)</code>، فإن إضاءة اللون الناتج ستكون بمسافة | على سبيل المثال ، إضاءة اللون تكون بين <code>0%</code> و <code>100%</code>. إذا استدعيت <code>scale-color($color, $lightness: 40%)</code>، فإن إضاءة اللون الناتج ستكون بمسافة 40% بين الإضاءة الأصلية للون والقيمة <code>100%</code>. وإذا استدعيت <code>scale-color($color, $lightness: -40%)</code>، فإن إضاءة اللون الناتج ستكون بمسافة 40% بين الإضاءة الأصلية للون والقيمة <code>0%</code>. | ||
يمكن أن يؤدي ذلك إلى تغيير خاصيات اللون الأحمر والأخضر والأزرق والتشبع والشفافية. تُحدّد الخاصيات على شكل وسائط مُسمّاة. ويجب أن تكون جميع الوسائط نسبًا مئوية بين <code>0%</code> و <code>100%</code>. | يمكن أن يؤدي ذلك إلى تغيير خاصيات اللون الأحمر والأخضر والأزرق والتشبع والشفافية. تُحدّد الخاصيات على شكل وسائط مُسمّاة. ويجب أن تكون جميع الوسائط نسبًا مئوية بين <code>0%</code> و <code>100%</code>. | ||
| سطر 43: | سطر 43: | ||
== أمثلة == | == أمثلة == | ||
مثال عن استخدام الدالة <code> | مثال عن استخدام الدالة <code>scale_color()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>):<syntaxhighlight lang="sass"> | ||
selector { | .selector { | ||
background-color: scale-color(hsl(120, 70%, 80%), $lightness: 50%); // #d4f7d4 | |||
color: scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%); // rgba(200, 205, 208, 0.7) | |||
} | } | ||
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | </syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | ||
selector { | .selector { | ||
background-color: #d4f7d4; | |||
color: rgba(200, 205, 208, 0.7); | |||
} | } | ||
| سطر 59: | سطر 59: | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغير قيمة الصبغة (hue). | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغير قيمة الصبغة (hue). | ||
* الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تغير قيمة | * الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تغير قيمة اللون. | ||
* الدالة <code>[[Sass/alpha|alpha()]]</code>: تُعيد قيمة مكون الشفافية (alpha). | * الدالة <code>[[Sass/alpha|alpha()]]</code>: تُعيد قيمة مكون الشفافية (alpha). | ||
== مصادر == | == مصادر == | ||
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method قسم الدالة | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method قسم الدالة scale_color في صفحة الدوال في توثيق Sass الرسمي.] | ||
[[تصنيف:Sass]] | [[تصنيف:Sass]] | ||
[[تصنيف: Sass Function]] | [[تصنيف: Sass Function]] | ||
مراجعة 10:57، 21 أبريل 2018
تقوم الدالة ()scale_color بالتعديل السائل (Fluidly scales) لخاصية واحدةٍ أو أكثر للّون. على عكس الدالة adjust_color()، التي تُغير خاصيات اللون بمقادير ثابتة، فإن ()scale_color تُغيرها بناءً على مدى ارتفاعها أو انخفاضها. هذا يعني أن إضاءة لون ساطعٍ بالفعل بواسطة ()scale_colorلن يغير من السطوع كثيرًا ، ولكن إضاءة لون داكن بنفس المقدار سيغيرها بشكل أكثر حدة. هذا سيجعل للدالة scale-color($color, ...) نفس التأثير بغض النظر عن اللون.
على سبيل المثال ، إضاءة اللون تكون بين 0% و 100%. إذا استدعيت scale-color($color, $lightness: 40%)، فإن إضاءة اللون الناتج ستكون بمسافة 40% بين الإضاءة الأصلية للون والقيمة 100%. وإذا استدعيت scale-color($color, $lightness: -40%)، فإن إضاءة اللون الناتج ستكون بمسافة 40% بين الإضاءة الأصلية للون والقيمة 0%.
يمكن أن يؤدي ذلك إلى تغيير خاصيات اللون الأحمر والأخضر والأزرق والتشبع والشفافية. تُحدّد الخاصيات على شكل وسائط مُسمّاة. ويجب أن تكون جميع الوسائط نسبًا مئوية بين 0% و 100%.
جميع الخاصيات اختيارية. كما لا يمكنك تحديد خاصيات RGB (أي $redو $green و $blue) و خاصيات HSL (أي $saturation و $value) في نفس الوقت.
البنية العامة
scale_color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
المعاملات
$color
اللون المراد تعديله.
$red
التعديل المُراد تطبيقه على المكون الأحمر.
$green
التعديل المُراد تطبيقه على المكون الأخضر.
$blue
التعديل المُراد تطبيقه على المكون الأزرق.
$saturation
التعديل المُراد تطبيقه على مكون الإشباع.
$lightness
التعديل المُراد تطبيقه على مكون الإضاءة.
$alpha
التعديل المُراد تطبيقه على مكون الشفافية.
القيم المعادة
قيمة لونية بعد التعديل.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت.
أمثلة
مثال عن استخدام الدالة scale_color() لضبط قيمة اللون (color) ولون الخلفية (background-color):
.selector {
background-color: scale-color(hsl(120, 70%, 80%), $lightness: 50%); // #d4f7d4
color: scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%); // rgba(200, 205, 208, 0.7)
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
background-color: #d4f7d4;
color: rgba(200, 205, 208, 0.7);
}
انظر أيضًا
- الدالة
adjust_hue(): تغير قيمة الصبغة (hue). - الدالة
adjust_color(): تغير قيمة اللون. - الدالة
alpha(): تُعيد قيمة مكون الشفافية (alpha).