|
|
| (4 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة) |
| سطر 1: |
سطر 1: |
| <noinclude>{{DISPLAYTITLE: الدالة <code>ie_hex_str()</code> في Sass}}</noinclude> | | <noinclude>{{DISPLAYTITLE: الدالة <code>ie_hex_str()</code> في Sass}}</noinclude> |
| تقوم الدالة <code>()ie_hex_str</code> بالتعديل السائل (Fluidly scales) لخاصية واحدةٍ أو أكثر للّون. على عكس الدالة <code>[[Sass/adjust color|adjust_color]]</code>، التي تُغير خاصيات اللون بمقادير ثابتة ، فإن <code>()scale_color</code> تُغيرها بناءً على مدى ارتفاعها أو انخفاضها. هذا يعني أن إضاءة لون ساطعٍ بالفعل بواسطة <code>()scale_color</code>لن يغير من السطوع كثيرًا ، ولكن إضاءة لون داكن بنفس المقدار سيغيرها بشكل أكثر حدة. هذا سيجعل للدالة <code>scale-color($color, …)</code> نفس التأثير بغض النظر عن اللون.
| | تحوّل الدالة <code>()ie_hex_str</code> اللون إلى صيغة تفهمها الخاصِّيَّة filters في المتصفح IE. |
| | |
| على سبيل المثال ، إضاءة اللون تكون بين <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>.
| |
| | |
| جميع الخاصيات اختيارية. كما لا يمكنك تحديد خاصيات RGB (أي <code>$red</code>و <code>$green</code> و <code>$blue</code>) و خاصيات HSL (أي <code>$saturation</code> و <code>$value</code>) في نفس الوقت.
| |
|
| |
|
| == البنية العامة == | | == البنية العامة == |
| <syntaxhighlight lang="sass"> | | <syntaxhighlight lang="sass"> |
| scale_color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
| | ie_hex_str($color) |
| </syntaxhighlight> | | </syntaxhighlight> |
|
| |
|
| سطر 17: |
سطر 11: |
| === <code>$color</code> === | | === <code>$color</code> === |
| اللون المراد تعديله. | | اللون المراد تعديله. |
|
| |
| === <code>$red</code> ===
| |
| التعديل المُراد تطبيقه على المكون الأحمر، قيمتها بين <code>-255</code> و <code>255</code> مشمولة.
| |
|
| |
| === <code>$green</code> ===
| |
| التعديل المُراد تطبيقه على المكون الأخضر، قيمتها بين <code>-255</code> و <code>255</code> مشمولة.
| |
|
| |
| === <code>$blue</code> ===
| |
| التعديل المُراد تطبيقه على المكون الأزرق، قيمتها بين <code>-255</code> و <code>255</code> مشمولة.
| |
|
| |
| === <code>$saturation</code> ===
| |
| التعديل المُراد تطبيقه على مكون الإشباع، قيمتها بين <code>-100%</code> و <code>100%</code> مشمولة.
| |
|
| |
| === <code>$lightness</code> ===
| |
| التعديل المُراد تطبيقه على مكون الإضاءة، قيمتها بين <code>-100%</code> و <code>100%</code> مشمولة.
| |
|
| |
| === <code>$alpha</code> ===
| |
| التعديل المُراد تطبيقه على مكون الشفافية، قيمتها بين <code>-1</code> و <code>1</code> مشمولة.
| |
|
| |
|
| == القيم المعادة == | | == القيم المعادة == |
| قيمة لونية بعد التعديل.
| | تُعاد سلسلة نصيَّة تمثِّل اللون <code>$color</code> بصيغة تناسب المتصفح IE. |
|
| |
|
| == الأخطاء والاستثناءات == | | == الأخطاء والاستثناءات == |
| سيُرمى الخطأ <code>ArgumentError</code> إذا كان أيٌّ من المعاملات من النوع الخاطئ أو خارج المجال المقبول، أو إذا عُدّلت خاصيات RGB وخاصيات HSL في نفس الوقت. | | سيُرمى الخطأ <code>ArgumentError</code> إذا لم يكن <code>$color</code> لونًا. |
| | |
| == أمثلة ==
| |
| مثال عن استخدام الدالة <code>'''scale_color'''()</code> لضبط قيمة اللون ([[CSS/color|color]]) ولون الخلفية ([[CSS/background-color|background-color]]):<syntaxhighlight lang="sass">
| |
| selector {
| |
| background-color: scale-color(hsl(120, 70%, 80%), $lightness: 50%) // hsl(120, 70%, 90%)
| |
| color: scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) // hsla(200, 7%, 80%, 0.7)
| |
| }
| |
| | |
| </syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة [[CSS]] الآتية:<syntaxhighlight lang="css"> | |
| selector {
| |
| background-color: hsl(120, 70%, 90%);
| |
| color: hsla(200, 7%, 80%, 0.7);
| |
| }
| |
| | |
| </syntaxhighlight>
| |
|
| |
|
| == انظر أيضًا == | | == انظر أيضًا == |
| * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغير قيمة الصبغة (hue). | | * الدالة <code>[[Sass/adjust hue|adjust_hue()]]</code>: تغير قيمة الصبغة (hue). |
| * الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تغير قيمة الصبغة (hue). | | * الدالة <code>[[Sass/adjust color|adjust_color()]]</code>: تغير قيمة اللون. |
| * الدالة <code>[[Sass/alpha|alpha()]]</code>: تُعيد قيمة مكون الشفافية (alpha).
| |
|
| |
|
| == مصادر == | | == مصادر == |
| * [https://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method قسم الدالة adjust_color في صفحة الدوال في توثيق Sass الرسمي.] | | * [https://sass-lang.com/documentation/Sass/Script/Functions.html#ie_hex_str-instance_method قسم الدالة ie_hex_str في صفحة الدوال في توثيق Sass الرسمي]. |
| [[تصنيف:Sass]] | | [[تصنيف:Sass|{{SUBPAGENAME}}]] |
| [[تصنيف: Sass Function]] | | [[تصنيف: Sass Function|{{SUBPAGENAME}}]] |
تحوّل الدالة ()ie_hex_str اللون إلى صيغة تفهمها الخاصِّيَّة filters في المتصفح IE.
البنية العامة
المعاملات
$color
اللون المراد تعديله.
القيم المعادة
تُعاد سلسلة نصيَّة تمثِّل اللون $color بصيغة تناسب المتصفح IE.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إذا لم يكن $color لونًا.
انظر أيضًا
مصادر