صياغة SassScript

بالإضافة إلى الصياغة العادية للغة CSS، تدعم Sass مجموعةً صغيرةً من المُلحقات تُدعى SassScript. تُتيح SassScript للخاصيّات استخدام المتغيرات والحسابيّات ودوالَّ إضافية. كما يمكن استخدام SassScript في قيمة أي خاصيّة.

ويمكن أيضًا استخدامها لتوليد المُحددّات (selectors) وأسماء الخاصيات، وهو أمرٌ مفيد عند كتابة المخاليط (mixins). ويتم ذلك عن طريق الاستيفاء (interpolation).

الصّدَفة التفاعلية (Interactive Shell)

يمكنك تجريب SassScript بسهولةٍ باستخدام الصّدفة التفاعلية. لتشغيل الصّدفة عليك تشغيل الأمر Sass في سطر الأوامر متبوعًا بالخيار ‎-i. أدخل في المِحث (prompt) أي تعبير صالح في SassScript لأجل تقييمه وطباعة النتائج:

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

المتغيرات: $

الطريقة البدهيّة لاستخدام SassScript هي باستخدام المتغيرات. تبدأ المتغيرات بعلامة الدولار ($)، وتُضبط كما تُضبط خاصيّات CSS:

$width: 5em;

يمكنك بعد ذلك الإشارة إليها في الخاصيّات، مثلًا:

#main {
  width: $width;
}

المتغيرات ستكون مرئيةً فقط في مستوى المُحدّدات المُتشعّبة حيث عُرِّفت أو دُونه. وإن عُرِّفت خارج كل المُحدّدات المتشعّبة فستكون مُتاحةً في كل مكان. يمكن أيضًا جعلها متاحةً في كل مكانٍ يدويًا عبر تعريفها بالرّاية ‎!global. على سبيل المثال:

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

ستُصرّف إلى:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

لأسباب تاريخية، لا فرق بين الشّرْطات (hyphens) والشرطات السُّفلية (underscores) في أسماء المتغيرات (وجميع مُعرِّفات Sass الأخرى). على سبيل المثال، إن عَرّفت متغيّرًا باسم ‎$main-width، فيمكنك الدخول إليه بالاسم ‎$main_width، والعكس بالعكس.

أنواع البيانات

تدعم SassScript ثمانيةً من أنواع البيانات:

• الأعداد (على سبيل المثال 1.2 و 13 و 10px)
• السلاسل النّصيّة، مع علامة الاقتباس وبدونها (على سبيل المثال "‎foo" و 'bar' و baz)
• الألوان (مثل blue و‏ #04a3f9‏ و rgba‎(255, 0, 0, 0.5)‎)
• القيم المنطقية (على سبيل المثال true و false)
• القيمة المعدومة (على سبيل المثال null)
• قوائم من القيم، مفصولةً بمسافات أو فواصل (على سبيل المثال ‎1.5em 1em 0 2em و‏‏ Helvetica, Arial, sans-serif)
• القواميس (maps) التي تربط قيمةً بأخرى (على سبيل المثال (key1: value1, key2: value2))
• مؤشّرات الدوال (function references)

كما تدعم SassScript أيضًا جميع الأنواع الأخرى لقيم خاصيّات CSS، مثل مجالات اليونيكود والتصريحات ‎!important. ولا تُعامَل هذه الأنواعَ معاملة خاصّة. ولكن تعامَل كأنّها سلاسل نصيّة غير مقتبسة.

السلاسل النصيّة

يوجد في لغة CSS نوعان من السّلاسل النصّية: السلاسل النصية المقتبسة، مثل "Lucida Grande" أو 'http://sass-lang.com'، والسلاسل النصية غير المُقتبسة، مثل sans-serif أو bold. تتعرّف SassScript على كلا النّوعين، وبصفة عامّةٍ، فإنّ النّوع المُستخدم في ملف sass، هو الذي سيُستخدم في ملف CSS الناتج.

هناك استثناءٌ واحدٌ لهذه القاعدة: عند استخدام الاستيفاء (interpolation)، فإنّ السلاسل النصيّة المقتبسة تصبح غير مقتبسة. هذا يُسهّل استخدام أسماء المُحدّدات في المخاليط (mixins). على سبيل المثال:

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

ستُصرّف إلى:

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

القوائم

تستخدم Sass القوائم لتمثيل قيم تصريحات لغة CSS مثل margin: 10px 15px 0 0 أو font-face: Helvetica,‎ Arial, sans-serif. القوائم ليست إلا سلسلةً من قيم أخرى، مفصولةً إما بمسافاتٍ أو فواصل. في الواقع، القيم المُفردة تعدّ قوائم كذلك: فهي قوائم أحادية.

القوائم لا تفعل الكثير بدون دوال قوائم SassScript. مثلًا، الدالة النونية (nth function) يمكنها الوصول إلى العناصر الموجودة في القائمة، ودالة الضّم (join function) تضمّ عدة قوائم معًا، أمّا دالّة الإلحاق (append function) فيمكنها إضافة عناصر إلى القوائم. وأمّا التعليمة ‎@each‏ ‎فيمكنها إضافة أنماط لكل عنصرٍ في القائمة.

بالإضافة إلى احتواء القيم البسيطة، يمكن أن تحتوي القوائمُ قوائمَ أخرى. مثلًا، 1px 2px, 5px 6px هي قائمة ثنائيّة تحتوي القائمة 1px 2px والقائمة 6px 5px. إن كانت القوائم الداخلية تستخدم نفس الفاصل الذي تستخدمه القائمة الخارجية، فسيكون عليك استخدام الأقواس لتُوضّح بداية القائمة الداخلية ونهايتها. على سبيل المثال، (1px 2px) (5px 6px) هي قائمة ثنائية تحتوي القائمة 1px 2px والقائمة 5px 6px. الفرق هو أنّ القائمة الخارجية مفصولة بالمسافات البيضاء خلافًا للمثال السابق حيث فُصلت بفواصل.

عند تحويل القوائم إلى لغة CSS، فإنّ sass لا تضيف الأقواس، لأنّ CSS لا تعرف الأقواس. وهذا يعني أنَّ (1px 2px) (5px 6px) و 1px 2px 5px 6px ستصبحان نفس الشيء عند تصريفهما إلى لغة CSS. لكنّها ليست كذلك عندما تكون مكتوبة بلغة sass: فالأولى هي قائمةٌ تحتوي قائمَتين، في حين أنّ الثانية هي قائمة تحتوي أربعة أعداد.

يمكن للقوائم أن تكون خاليةً من أيّ عنصر. تُمثّل هذه القوائم بالتعبير () (والذي يمكن أن يعني أيضًا قاموسًا [map] فارغًا). هذا النوع من القوائم لا يمكن أن يكون في مخرجات CSS مباشرة. فمثلًا القاعدة: font-family: ()‎ ستجعل sass تطلق خطأً. إذا احتوت قائمةٌ على قائمةٍ فارغة أو القيمة المعدومة (null)، مثلًا 2px 1px () 3px أو 1px 2px null 3px، فستُزال القوائم الفارغة والقيم المعدومة قبل تحويل القائمة الحاوية إلى لغة CSS.

قد تحتوي القوائم المفصولة بفواصل على فاصلةٍ زائدةٍ. وهذا مفيدٌ إن أردت تمثيل قائمةٍ أحادية (single-element list). على سبيل المثال، (,1) هي قائمة تحتوي على 1 أمّا (‎1 2 3,‎) فهي قائمةٌ مفصولةٌ بفواصل تحتوي على قائمةٍ مفصولةٍ بمسافاتٍ بيضاء تحتوي على 1 و 2 و 3.

القوائم ذات الأقواس المربعة

يمكن أيضًا كتابة القوائم باستعمال الأقواس المربعة.  تُستخدم القوائم ذات الأقواس المربعة كأسماء للأسطر في مخطّطات شبكات CSS، ولكن يمكن أن تُستخدم أيضًا في الكود البرمجي للغة sass مَثَلُها كمَثَلِ أيِّ قائمةٍ أخرى. ويمكن للقوائم ذات الأقواس المربعة أن تُفصَل بالمسافات البيضاء أو الفواصل.

القواميس (Maps)

تمثل القواميس ارتباطًا بين مفاتيح (keys) وقيم، المفاتيح تُستخدم لإيجاد القيم. وتُسهّل تجميع القيم في مجموعات مُسمّاةٍ والوصول إلى تلك المجموعات بشكل ديناميكيّ. ليس للقواميس مقابلٌ مباشر في لغة CSS، على الرغم من أنّ صياغتها مشابهةٌ لتعبيرات استعلامات الوسائط (media query expressions):

$map: (key1: value1, key2: value2, key3: value3);

خلافًا للقوائم، يجب أن تٌحاط القواميس دائمًا بالأقواس، ويجب أن تُفصل بالفواصل. يمكن أن تكون المفاتيح وقيمها أي كائن من كائنات SassScript. وفي القواميس لا يمكن ربط أكثر من قيمةٍ واحدةٍ بنفس المفتاح (ولكنّ القيمة يمكن أن تكون قائمةً). لكن يمكن أن ترتبط قيمة معينة مع أكثر من مفتاح واحد.

مثلَ القوائم، تُعالج القواميس أساسًا باستخدام دوال SassScript. فالدالة map-get تبحث عن القيم في القاموس والدالّة map-merge تضيف قيمًا إلى القاموس. أمّا التعليمة ‎@each فيمكن استخدامها لإضافة أنماط لكل الأزواج مفتاح/قيمة (key/value) في القاموس. ترتيب الأزواج في القاموس يبقى كما كان لحظة إنشائه.

يمكن استخدام القواميس في أيّ مكان تُستخدم فيه القوائم. وعند استخدامها من قبل دالةٍ خاصة بالقوائم، فستُعامل على أنّها قائمةٌ مكونة من أزواج. على سبيل المثال، (key1: value1, key2: value2) ستُعاملها دوال القوائم كأنّها القائمة المتشعّبة key1 value1, key2 value2. ولا يمكن أن تُعامَل القوائم على أنّها قواميس، باستثناء القائمة الفارغة التي تمثّل في آنٍ واحدٍ قاموسًا لا يحتوي أيّ أزواج مفتاح/قيمة وقائمة لا تحتوي أيّ عناصر.

تذكر أنّ مفاتيح القاموس يمكن أن تنتمي إلى أيّ نوع من أنواع بيانات Sass (حتى القواميس)، كما تتيح طريقةُ صياغة التصريح بالقواميس استخدام أي تعبير من تعبيرات تقنية SassScript والتي ستُقيَّم وتُحدَّد قيمتها لمعرفة القيمة التي ستُسنَد إلى المفتاح.

لا يمكن ترجمة القواميس إلى لغة CSS. وسيُسبِّب استخدامها كمتغيراتٍ أو معطياتٍ لدوال CSS خطأ. استخدم الدالة ‎inspect($value)‎ لإنتاج سلسلة نصّية لأجل إخراج القواميس في ملف CSS الناتج.

الألوان (Colors)

كل تعبيرات الألوان في CSS تُرجع قيمة لونيّة في SassScript. وهذا يشمل عددًا كبيرًا من الألوان المُسمّاة، والتي لا يمكن تمييزها عن السلاسل النصية غير المُقتبسة.

في الوضع المضغوط (compressed mode)، ستُخرج sass أوجز تمثيل ممكن للألوان في CSS. على سبيل المثال، ستُترجم ‎#FF0000 إلى الكلمة red في الوضع المضغوط، ولكنّ blanchedalmond ستُترجَم إلى ‎#FFEBCD.

من المشاكل الشائعة في استخدام الألوان المسماة هو أنه لمّا كانت sass تُفضّل نفس تنسيق المُخرجات كما كُتبت في أوضاع الإخراج الأخرى، فإنّ الألوان المستوفاة (interpolated) في محدد معيّن ستصبح غير صالحة عند ضغطها. لتجنب هذه المشكلة، ضع الألوان المسماة دائمًا بين علامتي تنصيص إن كنت ترغب في استخدامها في إنشاء محدّد.

الدوالّ من الدرجة الأولى (First Class Functions)

يمكن الحصول على مؤشر (reference) دالة معيّنة عبر التعبير get-function($function-name)‎. وعند تمرير مؤشّر دالة إلى call($function, $args...)‎ فستُستدعى الدالة التي يشير إليها. لا تُترجم لغة CSS دوال الدرجة الأولى مباشرةً، وأيّ محاولةٍ لفعل ذلك ستؤدي إلى إطلاق خطأ.

العمليات (Operations)

جميع الأنواع تدعم معاملات التساوي (== و =!). بالإضافة إلى ذلك، يدعم كل نوعٍ معاملاتٍ خاصةٍ به.

العمليات على الأعداد

تدعم SassScript العمليات الحسابية الاعتيادية على الأعداد (الإضافة + والطرح - والضرب * والقسمة / وباقي القسمة %). تحفظ دوال sass الرياضية الوحدات خلال العمليات الحسابية. هذا يعني أنه، كما هو الحال في الحياة الحقيقية، لا يمكنك أن تعمل على أرقام ذات وحدات غير متوافقة (مثل إضافة قيمة وحدتها px إلى قيمة وحدتها em)، وسيكون ناتج ضرب عددين لهما نفس الوحدة وحدةً مربّعةً (10px * 10px == 100px * px). تذكّر أنّ الوحدة المربعة px * px غير صالحة في لغة CSS، وستُطلق Sass خطأً إن حاولت استخدام وحدات غير صالحة في CSS.

معاملات المقارنة (< و > و =< و =>) مدعومةٌ أيضًا على الأعداد، أمّا معاملات التساوي (== و =!) فتدعمها جميع الأنواع.

القسمة والرمز /

تسمح CSS بأن يظهر الرمز / في قيم الخاصيات كوسيلة لفصل الأعداد. ولمّا كانت SassScript امتدادًا لصياغة الخاصيّات في لغة CSS، فلابُد من أن تدعمَ هذا النوع من الصياغة وفي الوقت عينه تسمحَ باستخدام الرمز / لأجل القسمة. وهذا يعني افتراضيًا، أنّه إذا فُصل عددان بالرمز / في SassScript، فسيظهران على نفس النحو في ملف CSS الناتج.

هناك ثلاث حالات سيُفسَّر فيها الرمز / على أنّه عمليّة قسمة. هذه الحالات تشمل غالبية استعمالات عمليّة القسمة. وهي:

1. إن خُزّنت القيمة، أو جزءٌ منها، في متغير أو أُعيدت من قبل دالة.
2. إن أُحيطت القيمة بقوسين، ما لم يكن هذان القوسان خارج قائمةٍ والقيمة داخلها.
3. إن كانت القيمة جزءًا من تعبيرٍ حسابيّ آخر.

على سبيل المثال:

p {
 font: 10px/8px;             // العادية، ليست قسمةً CSS
 $width: 1000px;
 width: $width/2;            // استخدام متغير، تحدث القسمة
 width: round(1.5)/2;        // استخدام دالة، تحدث القسمة
 height: (500px/2);          // استخدام الأقواس، تحدث القسمة
 margin-left: 5px + 8px/2px; // استخدام +، تحدث القسمة
 font: (italic bold 10px/8px); // داخل قائمة، لا تُحتسب الأقواس
}

ستُصرّف إلى:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

إن أردت استخدام المتغيرات مع الإبقاء على الصياغة العادية للرمز / في لغة CSS، فيمكنك استخدام {}# لإدراجها مباشرةً. على سبيل المثال:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

ستُصرّف إلى:

p {
  font: 12px/30px; }

الطرح والأرقام السالبة والرمز -

الرمز - يمكن أن يعني عدة أشياء مختلفة في لغتي CSS و Sass. فيمكن أن يكون عامل طرح (كما هو الحال في 5px - 3px)، أو بداية عددٍ سالبٍ (كما هو الحال في ‎-3px)، أو قد يكون عامل نفيٍ أحادي (كما في‎-$var)، ويمكن أن يكون جزءًا من مُعرّفٍ (كما في font-weight). في أكثر الحالات يمكن معرفة وظيفة الرمز - من السياق، ولكن هناك بعض الحالات المُلتبسة. كقاعدة عامةٍ إليك هذه التوصيات:

• دائمًا ضع مسافةً بيضاء قبل الرمز - وبعده عند استخدامه لأجل الطرح.
• ضع مسافة قبل - ولكن ليس بعدها في حالة الأعداد السلبية أو النفي الأحادي.
• ضع النفي الأحادي بين قوسين إن كان في قائمة مفصولة بالمسافات، كما هو الحال في التعبير ‎10px (-$var)‎.

أسبقية المعاني المختلفة للرمز - هي حسب الترتيب التالي:

1. جزء من مُعرّف. هذا يعني أنّ a-1 هي سلسلة نصيّة غير مُقتبسة قيمتها "a-1". الاستثناء الوحيد هي الوحدات؛ تسمح Sass عادةً لأي مُعرّف صالح بأن يًستخدم كمعرّف، ولكن لا يصحّ أن تحتوي المُعرّفات على شرْطة يليها عدد. وهذا يعني أنّ 5px-3px مثل 5px - 3px.
2. بين عددين وبدون مسافة بيضاء. هذا يدلّ على عمليّة الطرح، لذلك فالتعبير 1-2 مثل 1 - 2.
3. قبل عددٍ ولكن غيرَ مسبوقة بعددٍ. هذا يشير إلى عدد سلبي، لذلك فالتعبير 1 -2 هو قائمة تحتوي على 1 و -2.
4. بين عددين بغض النظر عن وجود المسافات. هذا يدلّ على عمليّة الطرح، لذلك فالتعبير 1‎ ‎-$var مثل 1‎ ‎- $var.
5. قبل قيمة معيّنة. هذا يعني عامل نفي أحادي. أي عاملًا يأخذ عددًا ويُرجع سالبه.

عمليات الألوان (Color Operations)

كل العمليات الحسابية مدعومةُ على القيم اللّونية، إذ تعمل على مركّبات الألوان مثنى مثنى. أي أنّ العمليّة تُنفّذ على الأحمر والأخضر والأزرق. على سبيل المثال:

p {
  color: #010203 + #040506;
}

ستحسُب 01 + 04 = 05 و 02 + 05 = 07 و 03 + 06 = 09، وستُصرّف إلى:

p {
  color: #050709; }

في المُجمل يُفضّل استخدام دوال الألوان على استخدام حسابيّات الألوان لتحقيق التأثير نفسه. تعمل العمليات الحسابية أيضًا بين الأعداد والألوان، وأيضًا مثنى مثنى. على سبيل المثال:

p {
  color: #010203 * 2;
}

ستحسُب 01 * 2 = 02 و 02 * 2 = 04 و 03 * 2 = 06، وستُصرّف إلى:

p {
  color: #020406; }

تذكّر أنّ الألوان ذات قناة الشفافية (alpha، أي تلك التي أُنشئت بواسطة إحدى الدالّتين rgba و hsla) يجب أن تكون لها نفس قيمة الشفافية من أجل أن تكون قابلةً لإجراء العمليّات الحسابية عليها. تلك العمليّات لا تؤثّر على قيمة الشفافية. على سبيل المثال:

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

ستُصرّف إلى:

p {
  color: rgba(255, 255, 0, 0.75); }

يمكن تعديل قناة الشفافية للونٍ معيّن باستخدام الدالّتين opacify و transparentize. على سبيل المثال:

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

ستُصرّف إلى:

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

تتطلب الخاصية filters في متصفح IE أن تشتمل كلُّ الألوان على قناة الشفافية، وأن تكون في الشكل ‎#AABBCCDD تحديدًا. يمكنك بسهولة تحويل اللون باستخدام الدالة ie_hex_str. على سبيل المثال:

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

ستُصرّف إلى:

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

العمليات على السلاسل النصيّة (String Operations)

يمكن استخدام العمليّة + لضمّ السلاسل النصّية:

p {
  cursor: e + -resize;
}

ستُصرّف إلى:

p {
  cursor: e-resize; }

لاحظ أنّه إذا أُضيفت سلسلة نصّية مُقتبسة إلى أخرى غير مقتبسة (أي أنّ السلسلة النصية المقتبسة موجودة على يسار إشارة +) فالنتيجة هي سلسلة نصيّة مقتبسة. وبالمثل، إذا أُضيفت سلسلة نصّية غير مُقتبسة إلى أخرى مقتبسة (السلسلة النصية غير المقتبسة على يسار إشارة +) فالنتيجة هي سلسلة نصيّة غير مقتبسة. على سبيل المثال:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

ستُصرّف إلى:

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

افتراضيّا، إذا وضَعت قيمتين بجانب بعضها البعض، فستُضمّان إلى بعضهما بفراغ واحد، مثلًا:

p {
  margin: 3px + 4px auto;
}

ستُصرّف إلى:

p {
  margin: 7px auto; }

يمكن استخدام الاستيفاء ({}#) داخل سلسلة نصية لحشو قيمة ديناميكيّة داخل السلسلة، مثلًا:

p:before {
  content: "I ate #{5 + 10} pies!";
}

ستُصرّف إلى:

p:before {
  content: "I ate 15 pies!"; }

تُعامَل القيمة المعدومة (Null) على أنّها سلسلة فارغة عند استيفاء السلاسل النصّية، مثلًا:

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

ستُصرّف إلى:

p:before {
  content: "I ate  pies!"; }

العمليات المنطقية (Boolean Operations)

تدعم SassScript العوامل and و or و not على القيم المنطقية.

عمليات القوائم (List Operations)

لا تدعم القوائم أيّ معاملات خاصة، بل تُعالج باستخدام دوال القوائم.

الأقواس

يمكن استخدام الأقواس للتأثير على ترتيب العمليات، مثلًا:

p {
  width: 1em + (2em * 3);
}

ستُصرّف إلى:

p {
  width: 7em; }

الدّوال

تُعرِّف SassScript بعض الدّوال المفيدة التي يمكن استدعاؤها باستخدام الصياغة العادية للدّوال في لغة CSS:

p {
  color: hsl(0, 100%, 50%);
}

ستُصرّف إلى:

p {
  color: #ff0000; }

راجع صفحة الدوال في Sass للحصول على قائمة كاملة بالدوال المتاحة.

الوسائط المسمّاة (Keyword Arguments)

يمكنُ استدعاء دوالّ Sass باستخدام وسائط (arguments) مسماةٍ صراحةً. المثال أعلاه يُمكن أن يُكتب على النحو التالي:

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

قد تكون هذه الصياغة أقلّ إيجازًا، ولكنّها يمكن أن تجعل مقروئية ملف الأنماط أيْسر. كما ستسمح للدوالّ بتقديم واجهات أكثر مرونة، وتمرير العديد من الوسائط دون أن تكون هناك صعوبة في استدعائها.

يمكن تمرير الوسائط المسمّاة حسب أيّ ترتيب، والمعطياتُ ذات القيم الافتراضية يمكن حذفها. ولأنّ الوسائط المُسمّاة أسماءُ متغيراتِ، فلا فرق بين استخدام الشرطات السفلية _ (underscores) واستخدام الشرطات العادية - (dashes).

انظر صفحة الدوال في Sass للحصول على قائمة كاملة من دوالّ sass وأسماء مُعطياتها، وكذلك إرشادات تعريفها في لغة Ruby.

الاستيفاء (Interpolation):‏ ‎#{}‎

يمكنك أيضًا استخدام المتغيرات في لغة SassScript في المُحدّدات (selectors) وأسماء الخاصيّات باستخدام صياغة الاستيفاء {}#:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

ستُصرّف إلى:

p.foo {
  border-color: blue; }

من الممكن أيضًا استخدام {}# في قيم الخاصيات. في معظم الحالات، هذا ليس أفضل من استخدام المتغيرات، ولكن باستخدام الصيغة {}# فكلّ العمليات المجاورة لها ستُعامل على أنّها صياغة عادية للغة CSS. على سبيل المثال:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

ستُصرّف إلى:

p {
  font: 12px/30px; }

الرمز & في SassScript

يشير الرمز & في SassScript إلى المُحدّد الأب الحالي، تمامًا كما هو الحال عندما يُستخدم في المحدّدات. وهو قائمةٌ مفصولة بالفواصل لقوائم مفصولة بالمسافات. على سبيل المثال:

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

قيمة ‎$selector في المثال هي ‎((".foo.bar" ".baz.bang"), ".bip.qux")‎. وُضعت المحددات المُركّبة بين علامتي اقتباس للإشارة إلى أنها سلاسلٌ نصّيةٌ، ولكن يمكن أن تكون غير مُقتبسة.

حتى لو لم يحتوِ المحدد الأب فاصلةً أو مسافةً، فسيكون لقيمة الرمز & دائمًا مستويان من التشعّب، بحيث يمكن الوصول إليها بطريقة موحدة.

إن لم يكن هناك محددٌ أب، فإنّ قيمة & ستكون معدومةً (null). هذا يعني أنه يمكنك استخدامها في مخلوط (mixin) للتحقق من وجود المحدد الأب:

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

القيمة الافتراضية للمتغيرات: ‎!default

يمكنك ضبط قيمة متغيرٍ إن لم يكن قد ضُبِط سلفًا بإضافة الراية ‎!default عقِب القيمة. هذا يعني أنه إذا عُيِّنت قيمة المتغير سابقُا فلن يُعيّن مجدّدًا، ولكن إذا لم تكن لديه قيمة بعدُ، فستعطى له قيمةٌ في تلك الحالة. على سبيل المثال:

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

ستُصرّف إلى:

#main {
  content: "First content";
  new-content: "First time reference"; }

تَعتبر ‎!default أنّ المتغيرات ذات القيمة المعدومة (null) هي قيمٌ غير مُعيّنة. مثلًا:

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

ستُصرّف إلى:

#main {
  content: "Non-null content"; }

مصادر

• قسم SassScript من توثيق Sass الرسمي.