الفرق بين المراجعتين لصفحة: «Sass/mix»

المراجعة الحالية بتاريخ 07:01، 20 مايو 2018

تمزج الدالة mix()‎ بين لونين إذ تأخذ تحديدًا متوسط كلِّ مكوِّن من مكونات RGB لكلا اللونين لتعطي اللون الناتج، ويمكن اختياريًّا تحديد نسبة المزج. تؤخذ شفافيَّة اللون بالحسبان عند تعديل ومزج المكونات بحسب نسبتها.

يحدِّد المعامل ‎$weight الكمية التي ستمزج من اللون الأول مع اللون الثاني. القيمة الافتراضيًة لذاك المعامل هي ‎50%‎، أي يكون اللون الناتج حاصل مزج نصف اللون الأول مع نصف اللون الثاني. أمَّا إن كانت قيمته ‎25%‎ فتعني أنَّه يجب مزج ربع (‎25%‎) اللون الأول مع ثلاثة أرباع (‎75%‎) اللون الثاني وهكذا.

البنية العامة

mix($color1, $color2, $weight: 50%)

المعاملات

`‎$color1`

اللون الأول.

`‎$color2`

اللون الثاني.

`‎$weight`

نسبة المزج لكل لون. إن كانت أقرب إلى ‎100%‎، فستُمزج نسبة أكبر من اللون الأول ‎$color1 ويكون اللون الناتج أقرب إليه والعكس بالعكس (كما شُرح آنفًا).

القيم المعادة

تُعاد قيمة اللون الناتج عن مزج اللون الأول ‎$color1 مع اللون الثاني ‎$color2 بحسب نسبة المزج ‎$weight.

الأخطاء والاستثناءات

سيُرمى الخطأ 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: purple;
  background-color: rgba(64, 0, 191, 0.75); }

انظر أيضًا

الدالة rgb()‎: تنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث (أحمر، وأخضر، وأزرق).
الدالة rgba()‎: تُنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث بالإضافة إلى الشفافيَّة.

مصادر

قسم الدالة mix في صفحة الدوال في توثيق Sass الرسمي.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE: الدالة <code>mix()</code>‎ في Sass}}</noinclude>
-تمزج الدالة <code>mix()</code>‎ بين لونين. على وجه التحديد، فهي تأخذ متوسط كل مكون من مكونات RGB، موزونة (اختياريًا) بنسبة مئوية معيّنة. تؤخذ شفافية اللون بالحُسبان عند تعديل وترجيح المكونات.
+تمزج الدالة <code>mix()</code>‎ بين لونين إذ تأخذ تحديدًا متوسط كلِّ مكوِّن من مكونات RGB لكلا اللونين لتعطي اللون الناتج، ويمكن اختياريًّا تحديد نسبة المزج. تؤخذ شفافيَّة اللون بالحسبان عند تعديل ومزج المكونات بحسب نسبتها.
-يحدد الوزن المقدار الذي يجب تضمينه من اللون الأول في اللون الناتج. ويساوي افتراضيًا ‎<code>50%‎</code>، يعني أنه يجب استخدام نصف اللون الأول ونصف اللون الثاني. أما ‎<code>25%</code>‎ فتعني أنه يجب استخدام ربع اللون الأول وثلاثة أرباع اللون الثاني.
+يحدِّد المعامل <code>‎$weight</code> الكمية التي ستمزج من اللون الأول مع اللون الثاني. القيمة الافتراضيًة لذاك المعامل هي ‎50%‎، أي يكون اللون الناتج حاصل مزج نصف اللون الأول مع نصف اللون الثاني. أمَّا إن كانت قيمته ‎25%‎ فتعني أنَّه يجب مزج ربع (‎25%‎) اللون الأول مع ثلاثة أرباع (‎75%‎) اللون الثاني وهكذا.
 == البنية العامة ==
@@ سطر 18: / سطر 18: @@
 === <code>‎$weight</code> ===
-الوزن النسبي لكل لون. إن كان أقرب إلى ‎<code>100%‎</code> فسيُعطي وزنًا أكبر للون <code>‎$color1</code>، والعكس بالعكس.
+نسبة المزج لكل لون. إن كانت أقرب إلى ‎100%‎، فستُمزج نسبة أكبر من اللون الأول <code>‎$color1</code> ويكون اللون الناتج أقرب إليه والعكس بالعكس (كما شُرح آنفًا).
 == القيم المعادة ==
-اللون الممزوج.
+تُعاد قيمة اللون الناتج عن مزج اللون الأول <code>‎$color1</code> مع اللون الثاني <code>‎$color2</code> بحسب نسبة المزج <code>‎$weight</code>.
 == الأخطاء والاستثناءات ==
-سيُرمى الخطأ <code>ArgumentError</code> إن كان أحد المعاملات من النوع الخاطئ أو كان <code>‎$weight</code> خارج الحدود.
+سيُرمى الخطأ <code>ArgumentError</code> إن كان أحد المعاملات من النوع الخطأ، أو كانت قيمة المعامل <code>‎$weight</code> خارج المجال المسموح.
 == أمثلة ==
-مثال عن استخدام الدالة <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 {
-   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">
 .selector {
-   color: #7f007f;
+  color: purple;
-   background-color: rgba(63, 0, 191, 0.75);
+  background-color: rgba(64, 0, 191, 0.75); }
-}
 </syntaxhighlight>
 == انظر أيضًا ==
-* الدالة [[Sass/rgb|rgb()‎]]:  تُنشئ لونا انطلاقا من المركبات اللونية الثلاث.
+* الدالة <code>[[Sass/rgb|rgb()‎]]</code>: تنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث (أحمر، وأخضر، وأزرق).
-* الدالة [[Sass/rgba|rgba()]]‎:  تُنشئ لونا انطلاقا من المركبات اللونية الثلاث والشفافية.
+* الدالة <code>[[Sass/rgba|rgba()]]</code>‎: تُنشئ لونًا انطلاقًا من المركبات اللونيَّة الثلاث بالإضافة إلى الشفافيَّة.
 == مصادر ==
-* [https://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method قسم الدالة mix في صفحة الدوال في توثيق Sass الرسمي.]
+* [https://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method قسم الدالة mix في صفحة الدوال في توثيق Sass الرسمي].
-[[تصنيف:Sass]]
+[[تصنيف:Sass|{{SUBPAGENAME}}]]
-[[تصنيف: Sass Function]]
+[[تصنيف: Sass Function|{{SUBPAGENAME}}]]