الفرق بين المراجعتين لصفحة: «Sass/mix»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) ط مراجعة الصفحة وتدقيقها. |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: الدالة <code>mix()</code> في Sass}}</noinclude> | <noinclude>{{DISPLAYTITLE: الدالة <code>mix()</code> في Sass}}</noinclude> | ||
تمزج الدالة <code>mix()</code> بين لونين | تمزج الدالة <code>mix()</code> بين لونين إذ تأخذ تحديدًا متوسط كلِّ مكوِّن من مكونات RGB لكلا اللونين لتعطي اللون الناتج، ويمكن اختياريًّا تحديد نسبة المزج. تؤخذ شفافيَّة اللون بالحسبان عند تعديل ومزج المكونات بحسب نسبتها. | ||
يحدِّد المعامل <code>$weight</code> الكمية التي ستمزج من اللون الأول مع اللون الثاني. القيمة الافتراضيًة لذاك المعامل هي <code>50%</code>، أي يكون اللون الناتج حاصل مزج نصف اللون الأول مع نصف اللون الثاني. أمَّا إن كانت قيمته <code>25%</code> فتعني أنَّه يجب مزج ربع (25%) اللون الأول مع ثلاثة أرباع (75%) اللون الثاني وهكذا. | |||
== البنية العامة == | == البنية العامة == | ||
| سطر 18: | سطر 18: | ||
=== <code>$weight</code> === | === <code>$weight</code> === | ||
نسبة المزج لكل لون. إن كانت أقرب إلى 100%، فستُمزج نسبة أكبر من اللون <code>$color1</code> ويكون اللون الناتج أقرب إليه والعكس بالعكس (كما شُرح آنفًا). | |||
== القيم المعادة == | == القيم المعادة == | ||
اللون | تُعاد قيمة اللون الناتج عن مزج اللون الأول <code>$color1</code> مع اللون الثاني <code>$color2</code> بحسب نسبة المزج <code>$weight</code>. | ||
== الأخطاء والاستثناءات == | == الأخطاء والاستثناءات == | ||
سيُرمى الخطأ <code>ArgumentError</code> إن كان أحد المعاملات من النوع | سيُرمى الخطأ <code>ArgumentError</code> إن كان أحد المعاملات من النوع الخطأ، أو كانت قيمة المعامل <code>$weight</code> خارج المجال المسموح. | ||
== أمثلة == | == أمثلة == | ||
المثال 1: استخدام الدالة <code>mix()</code> لضبط قيمة اللون (<code>[[CSS/color|color]]</code>) ولون الخلفية (<code>[[CSS/background-color|background-color]]</code>).<syntaxhighlight lang="sass"> | |||
.selector { | .selector { | ||
color: mix(#f00, #00f); // #7f007f | color: mix(#f00, #00f); // #7f007f | ||
| سطر 40: | سطر 40: | ||
== انظر أيضًا == | == انظر أيضًا == | ||
* الدالة [[Sass/rgb|rgb()]]: | * الدالة [[Sass/rgb|rgb()]]: تنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث (أحمر، وأخضر، وأزرق). | ||
* الدالة [[Sass/rgba|rgba()]]: | * الدالة [[Sass/rgba|rgba()]]: تُنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث بالإضافة إلى الشفافيَّة. | ||
== مصادر == | == مصادر == | ||
مراجعة 14:23، 3 مايو 2018
تمزج الدالة mix() بين لونين إذ تأخذ تحديدًا متوسط كلِّ مكوِّن من مكونات RGB لكلا اللونين لتعطي اللون الناتج، ويمكن اختياريًّا تحديد نسبة المزج. تؤخذ شفافيَّة اللون بالحسبان عند تعديل ومزج المكونات بحسب نسبتها.
يحدِّد المعامل $weight الكمية التي ستمزج من اللون الأول مع اللون الثاني. القيمة الافتراضيًة لذاك المعامل هي 50%، أي يكون اللون الناتج حاصل مزج نصف اللون الأول مع نصف اللون الثاني. أمَّا إن كانت قيمته 25% فتعني أنَّه يجب مزج ربع (25%) اللون الأول مع ثلاثة أرباع (75%) اللون الثاني وهكذا.
البنية العامة
mix($color1, $color2, $weight: 50%)
المعاملات
$color1
اللون الأول.
$color2
اللون الثاني.
$weight
نسبة المزج لكل لون. إن كانت أقرب إلى 100%، فستُمزج نسبة أكبر من اللون $color1 ويكون اللون الناتج أقرب إليه والعكس بالعكس (كما شُرح آنفًا).
القيم المعادة
تُعاد قيمة اللون الناتج عن مزج اللون الأول $color1 مع اللون الثاني $color2 بحسب نسبة المزج $weight.
الأخطاء والاستثناءات
سيُرمى الخطأ ArgumentError إن كان أحد المعاملات من النوع الخطأ، أو كانت قيمة المعامل $weight خارج المجال المسموح.
أمثلة
المثال 1: استخدام الدالة mix() لضبط قيمة اللون (color) ولون الخلفية (background-color).
.selector {
color: mix(#f00, #00f); // #7f007f
background-color: mix(rgba(255, 0, 0, 0.5), #00f); // rgba(63, 0, 191, 0.75)
}
سيُصرّف المثال السابق إلى شيفرة CSS الآتية:
.selector {
color: #7f007f;
background-color: rgba(63, 0, 191, 0.75);
}
انظر أيضًا
- الدالة rgb(): تنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث (أحمر، وأخضر، وأزرق).
- الدالة rgba(): تُنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث بالإضافة إلى الشفافيَّة.