تعليمات التحكم في 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 ترجع قائمةً أو خريطة (map).

التعليمة ‎@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 الرسمي.