صياغة SassScript

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

تدعم Sass، بالإضافة إلى الصياغة العادية للغة CSS، مجموعةً صغيرةً من المُلحقات تُدعى 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، مثل مجالات الترميز Unicode والتصريحات ‎!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. وهذا يشمل عددًا كبيرًا من الألوان المُسمّاة، والتي لا يمكن تمييزها عن السلاسل النصيَّة غير المُقتبسة.

ستُخرج sass في الوضع المضغوط (compressed mode) أوجز تمثيل ممكن للألوان في 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%);
}

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

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

انظر صفحة الدوال في 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"; }

تعامَل القيمة المعدومة (null) المسندة إلى المتغير على أنَّها قيمة غير مسندة، لذا ستسند القيمة الإفتراضيَّة إليه آنذاك.

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

#main {
  content: $content;
}

ستُصرّف إلى:

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

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Sass/SassScript&oldid=8747"