عرض مصدر Sass/control directives

<noinclude>{{DISPLAYTITLE:تعليمات التحكم في Sass}}</noinclude>
تدعم SassScript تعليمات وتعابير التحكم التي تُستعمل لرَهن تفعيل الأنماط بشروط معيّنةٍ أو لتضمين نفس النمط لكن مع تطبيق بعض التنويعات عليه.

'''ملاحظة''': تعليمات التحكم هي ميزة متقدمةٌ، كما أنّها غير شائعة الاستخدام. وُجدت أساسًا لتُستعمل في [[Sass/mixins|المخاليط]] (mixins)، لاسيما تلك التي هي جزءٌ من المكتبات مثل [http://compass-style.org/ Compass]، لذلك فهي تتطلب مرونةً كبيرةً في التعامل معها.

== <code>if()‎</code> ==
تُعيد الدالة المضمّنة <code>if()‎</code> إحدى قيمتين محدَّدتين بناءً على شرط معيّن، ويمكن استخدامها في أيّ سياق برمجي. لا تتحقق الدالة <code>if</code> إلا من الوسيط (argument) المقابل للقيمة التي ستعيدها، وهذا يسمح لك بالإشارة إلى المتغيرات غير المعرّفة أو بتنفيذ حساباتٍ قد تسبّب خطأً في العادة (مثل القسمة على الصفر).<syntaxhighlight lang="sass">
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

</syntaxhighlight>

== <code>‎@if</code> ==
تأخذ التعليمة <code>‎@if</code> تعبيرًا من [[Sass/SassScript|تعابير SassScript]] وتستخدم الأنماط المتشعّبة تحتها عندما يعيد التعبير أيّ قيمة غير القيمة <code>false</code> أو القيمة <code>null</code>، مثل:<syntaxhighlight lang="sass">
p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
</syntaxhighlight>ستُصرّف الشيفرة السابقة إلى:<syntaxhighlight lang="css">
p {
  border: 1px solid; }
</syntaxhighlight>يمكنك التحقُّق يدويًا من <code>‎$var == false</code> أو <code>‎$var == null</code> إن كنت تريد أن تُميّز بينهما.

يمكن أن تُتبع التعليمة <code>‎@if</code> بعدَّة تعليمات مثل التعليمة <code>‎@else if</code> والتعليمة <code>‎@else</code> التي تستعمل لمرة واحدة في النهاية. إن لم تحقِّق التعليمة <code>‎@if</code> الشرط، فسيُنتقل إلى التعليمات <code>‎@else if</code> بالترتيب إلى أن تنجح إحداها في تحقيق الشرط أو ستُطبّقَ التعليمة ‎<code>@else</code> إن لم يتحقق الشرط في أيِّ منها. انظر الشيفرة التالية:<syntaxhighlight lang="sass">
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
p {
  color: green; }
</syntaxhighlight>

== <code>‎@for</code> ==
تستعمل التعليمة <code>‎@for</code> لإظهار مجموعة من الأنماط تكراريًا، ويستخدم عند كل تكرارٍ عدّادٌ (متغيرٌ)  لأجل ضبط عدد مرات ظهور الأنماط. هنالك شكلان لاستعمال هذه التعليمة؛ الشكل الأول هو <code>‎@for $var from <start> through <end></code>‎، والشكل الثاني هو <code>‎@for $var from <start> to <end></code>‎. الاختلاف بينهما هو في الكلمتين <code>through</code> و <code>to</code> اللتين ستحددان مجال التكرار كما سيوضح ذلك. يمكن أن يكون <code>‎$var</code> أيَّ مُتغيّر مثل <code>‎$i</code> أمّا <code><start></code> و <code><end></code> فهما تعبيران من [[Sass/SassScript|تعابير SassScript]] يُرجعان أعدادًا صحيحةً. عندما يكون <code><start></code> أكبر من <code><end></code>، فسيكون العد تنازليًّا بدلًا من أن يكون تصاعديًّا.

تضبط التعليمة <code>‎@for</code> المتغير <code>‎$var</code> إلى القيم الموجود في المجال المحدَّد بالتتابع في كل مرة تُخرج الأنماط المتشعّبة باستخدام قيمة <code>‎$var</code>. انتبه إلى أنه ستدخل في الشكل <code>from ... through</code> القيمة <code><start></code> والقيمة <code><end></code> في مجال العد بينما لن تدخل في الشكل <code>from ... to</code> القيمة <code><end></code> أي سيتوقف العد عند القيمة السابقة أو اللاحقة لها بحسب نوع العد (تصاعديًّا أم تنازليًّا).

يوضح المثال التالي اسخدام الصياغة <code>through</code>:<syntaxhighlight lang="sass">
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }
</syntaxhighlight>

== <code>‎@each</code> ==
الشكل الاعتيادي للتعليمة <code>‎@each</code> هو <code>‎@each $var in <list or map>‎</code>. يمكن أن يكون ‎<code>$var</code> أي مُتغيّر، مثل <code>‎$length</code> أو <code>‎$name</code>، والقيمة <code><list or map></code> هي تعبيرٌ من [[Sass/SassScript|تعابير SassScript]] ترجع [[Sass/SassScript#.D8.A7.D9.84.D9.82.D9.88.D8.A7.D8.A6.D9.85|قائمةً]] أو [[Sass/SassScript#.D8.A7.D9.84.D8.AE.D8.B1.D8.A7.D8.A6.D8.B7 .28Maps.29|خريطة]] (map).

التعليمة <code>‎@each</code> تعطي للمتغير <code>‎$var</code> كل القيم الموجودة في القائمة أو الخريطة، ثم تُخرج الأنماط التي تحتويها باستخدام قيمة <code>‎$var</code>. انظر المثال التالي:<syntaxhighlight lang="sass">
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

</syntaxhighlight>سيصرّف إلى:<syntaxhighlight lang="css">
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

</syntaxhighlight>

=== الإسناد المتعدد (Multiple Assignment) ===
يمكن للتعليمة <code>‎@each</code> استخدام عدَّة متغيرات، كما هو الحال في <code>‎@each $var1, $var2, ... in <list></code>‎. إن كانت <code><list></code> قائمةً مكوّنةً من عدَّة قوائم، فإنّ كل عنصرٍ من عناصر القوائم الفرعية سيسند إلى المتغير الموافق له مثل:<syntaxhighlight lang="sass">
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
</syntaxhighlight>ستُصرّف الشيفرة السابقة  إلى:<syntaxhighlight lang="css">
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

</syntaxhighlight>لمّا كانت [[Sass/SassScript#.D8.A7.D9.84.D8.AE.D8.B1.D8.A7.D8.A6.D8.B7 .28Maps.29|الخرائط]] تُعامل كأنّها قوائمٌ مُكوّنةٌ من أزواج، فيمكن تطبيق الاسناد المتعددة عليها أيضًا. الشيفرة التالية:<syntaxhighlight lang="sass">
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

</syntaxhighlight>

== ‎@while ==
تأخذ التعليمة <code>‎@while</code> تعبيرًا من [[Sass/SassScript|تعابير SassScript]] وتخرج الأنماط المتشعّبة بشكلٍ متكررٍ إلى أن تساوي قيمة ذلك التعبير القيمة <code>false</code>. يمكن أن تُستخدم لإجراء عمليّات تكراريّة أكثر تعقيدًا مما تُتيحه التعليمة <code>[[#@for|‎@for]]</code>، على الرغم من أنّ هذا نادرًا ما يكون ضروريًا. انظر مثلًا الشيفرة التالية:<syntaxhighlight lang="sass">
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

</syntaxhighlight>ستُصرّف إلى:<syntaxhighlight lang="css">
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }
</syntaxhighlight>

== مصادر ==
* [https://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions قسم Control Directives & Expressions من توثيق Sass الرسمي].
[[تصنيف:Sass|{{SUBPAGENAME}}]]