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