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

من موسوعة حسوب
لا ملخص تعديل
ط استبدال النص - 'توثيق Sass الرسمي.]' ب'توثيق Sass الرسمي].'
 
(4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE: الدالة <code>()append‎</code> في Sass}}</noinclude>
<noinclude>{{DISPLAYTITLE: الدالة <code>()append‎</code> في Sass}}</noinclude>
تُضيف الدالة <code>append()‎</code> قيمة ما إلى قائمةٍ.
تُضيف الدالة <code>append()‎</code> قيمة محدَّدة إلى قائمةٍ ما.


ما لم يُمرَّر الوسيط ‎<code>$separator</code>، فإنّ القائمة التي ستُعيدها الدالة ستكون مفصولة بمسافات بيضاء إن كانت القائمة أحاديةً.
ما لم يُمرَّر المعامل ‎<code>$separator</code>، فستستعمل المسافة البيضاء لفصل عناصر القائمة التي ستُعيدها الدالة إن كانت القائمة أحاديةً.


كبقية دوال القوائم، فالدالة <code>()append</code> تعيد قائمة جديدةً بدلًا من تغييرها موضعيًا.
تعيد الدالة <code>()append</code>، مثل بقيَّة دوال القوائم، قائمة جديدةً بدلًا من تغييرها موضعيًا.


== البنية العامة ==
== البنية العامة ==
سطر 14: سطر 14:


=== <code>‎$list</code> ===
=== <code>‎$list</code> ===
القائمة التي ستعمل عليها الدالة.
القائمة التي ستُجرى عليها العمليَّة.


=== <code>$val</code> ===
=== <code>val‎$</code> ===
القيمة التي ستُضاف إلى القائمة.
القيمة التي ستُضاف إلى القائمة.


=== <code>‎$separator</code> ===
=== <code>‎$separator</code> ===
فاصلة القائمة المُستخدمة. إن كانت فاصلةً أو مسافةً، فستُستخدم. أما إن كانت قيمتها <code>auto</code> (القيمة الافتراضيةفسيُحدد الفاصل كما شرحنا سابقًا.
الفاصلة المُستخدمة لفصل عناصر القائمة. إن كانت فاصلةً أو مسافةً، فستُستخدم تلك القيمة الممرّرة. أما إن كانت قيمتها <code>auto</code> (القيمة الافتراضيَّةفسيُحدَّد الفاصل كما شرحنا سابقًا.


== القيم المعادة ==
== القيم المعادة ==
القائمة الناتجة بعد إضافة العنصر.
تُعاد القائمة <code>‎$list</code> بعد إضافة العنصر <code>‎$val</code> إليها.


== أمثلة ==
== أمثلة ==
سطر 30: سطر 30:
   padding: append((10px 20px), 30px); // 10px 20px 30px
   padding: append((10px 20px), 30px); // 10px 20px 30px
}
}
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
</syntaxhighlight>سيُصرّف المثال السابق إلى شيفرة CSS الآتية:<syntaxhighlight lang="css">
.selector {
.selector {
   padding: 10px 20px 30px;
   padding: 10px 20px 30px; }
}
 
</syntaxhighlight>
</syntaxhighlight>


== مصادر ==
== مصادر ==
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#append-instance_method قسم الدالة append في صفحة الدوال في توثيق Sass الرسمي.]
* [https://sass-lang.com/documentation/Sass/Script/Functions.html#append-instance_method قسم الدالة append في صفحة الدوال في توثيق Sass الرسمي].
[[تصنيف:Sass]]
[[تصنيف:Sass|{{SUBPAGENAME}}]]
[[تصنيف:Sass Function]]
[[تصنيف:Sass Function|{{SUBPAGENAME}}]]

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

تُضيف الدالة append()‎ قيمة محدَّدة إلى قائمةٍ ما.

ما لم يُمرَّر المعامل ‎$separator، فستستعمل المسافة البيضاء لفصل عناصر القائمة التي ستُعيدها الدالة إن كانت القائمة أحاديةً.

تعيد الدالة ()append، مثل بقيَّة دوال القوائم، قائمة جديدةً بدلًا من تغييرها موضعيًا.

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

append($list, $val, $separator: auto)

المعاملات

‎$list

القائمة التي ستُجرى عليها العمليَّة.

val‎$

القيمة التي ستُضاف إلى القائمة.

‎$separator

الفاصلة المُستخدمة لفصل عناصر القائمة. إن كانت فاصلةً أو مسافةً، فستُستخدم تلك القيمة الممرّرة. أما إن كانت قيمتها auto (القيمة الافتراضيَّة)، فسيُحدَّد الفاصل كما شرحنا سابقًا.

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

تُعاد القائمة ‎$list بعد إضافة العنصر ‎$val إليها.

أمثلة

مثال عن استخدام الدالة append()‎ لضبط قيمة الحواشي (padding):

.selector {
  padding: append((10px 20px), 30px); // 10px 20px 30px
}

سيُصرّف المثال السابق إلى شيفرة CSS الآتية:

.selector {
  padding: 10px 20px 30px; }

مصادر