موجهات التحكم في Sass

تدعم SassScript موجّهات وتعابير التحكم التي تُستعمل لرَهن تفعيل الأنماط بشروط معيّنةٍ أو لأجل تضمين نفس النمط لكن مع بعض التنويعات عليه.

ملاحظة: مُوجّهات التحكم هي ميزة متقدمةٌ، كما أنّها غير شائعة الاستخدام. وقد وُجدت أساسًا لتُستعمل في المخاليط (mixins)، لا سيما تلك التي هي جزءٌ من المكتبات مثل Compass، لذلك فهي تتطلب مرونةً كبيرةً.

if()‎

تُعيد الدالة المضمّنة if()‎ إحدى قيمتين على أساس شرط معيّن. ويمكن استخدامها في أيّ سياق برمجي. لا تُقيِّم الدالة if إلا الوسيط (argument) المقابل للقيمة التي ستعيدها، وهذا سيسمح لك بالإشارة إلى المتغيرات غير المعرّفة أو لأجل إدراج حساباتٍ تسبّب خطأً في العادة (على سبيل المثال، القسمة على الصفر).

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

‎@if

يأخذ الموجّه ‎@if تعبيرًا من تعابير SassScript ويَستخدم الأنماط المتشعّبة تحته في حالة أعاد التعبير أيّ قيمة تُخالف false أو null، على سبيل المثال:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

ستُصرّف إلى:

p {
  border: 1px solid; }

يمكنك التحقق يدويًا من ‎$var == false أو ‎$var == null إن كنت تريد أن تُميّز بينهما. يمكن أن تُتبع التعليمة ‎@if بعدة تعليمات ‎@else if وتعليمةُ ‎@else واحدةٍ. إن فشلت التعليمة ‎@if فستُحاول تجريب التعليمات ‎@else if بالترتيب إلى أن تنجح إحداها أو تُطبّقَ التعليمة ‎@else. على سبيل المثال:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

ستُصرّف إلى:

p {
  color: green; }

‎@for

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

التعليمة ‎@for تعطي للمتغير ‎$var كل القيم الموجود في المجال المحدد بالتتابع، وفي كل مرة تُخرج الأنماط المتشعّبة باستخدام قيمة ‎$var. بالنسبة للشكل from ... through،  فسيتضمّن المجالُ القيمتين <start> و <end>، أمّا في الشكل from ... to فلن يتضمّن قيمة <end>.

مثال يستخدم الصياغة through:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

ستُصرّف إلى:

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

‎@each

الشكل الاعتيادي للمُوجّه ‎@each هو ‎@each $var in <list or map>‎. يمكن أن يكون ‎$var أي اسم مُتغيّر، مثل ‎$length أو ‎$name، و <list or map> هو تعبيرٌ من تعابير SassScript يُرجع قائمةً أو قاموسًا.

القاعدة ‎@each تعطي للمتغير ‎$var كل القيم الموجودة في القائمة أو القاموس، ثم تُخرج الأنماط التي تحتويها باستخدام قيمة ‎$var. على سبيل المثال:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

ستُصرّف إلى:

.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'); }

الإسناد المتعدد (Multiple Assignment)

يمكن للموجّه ‎@each استخدام عدة متغيرات، كما هو الحال في ‎@each $var1, $var2, ... in <list>‎. إن كانت <list> قائمةً مكوّنةً من قوائم، فإنّ كل عنصرٍ من عناصر القوائم الفرعية سيُعيّن في المتغير الموافق له. على سبيل المثال:

@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;
  }
}

ستُصرّف إلى:

.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; }

لمّا كانت القواميس تُعامل كأنّها قوائمٌ مُكوّنةٌ من أزواج، فإنّ التعيين المتعددة يعمل عليها كذلك. على سبيل المثال:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

ستُصرّف إلى:

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

‎@while

يأخذ الموجّه ‎@while تعبيرًا من تعابير SassScript ويُخرج الأنماط المتشعّبة بشكلٍ متكررٍ إلى أن تساوي قيمة ذلك التعبير القيمة false. يمكن أن تُستخدم لإجراء عمليّات تكراريّة أكثر تعقيدًا مما تُتيحه التعليمة ‎@for، على الرغم من أنّ هذا نادرًا ما يكون ضروريًا. على سبيل المثال:

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

ستُصرّف إلى:

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

مصادر

• قسم Control Directives & Expressions من توثيق Sass الرسمي.