Sass

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

Sass‏ (Syntactically Awesome StyleSheets)

Sass هي امتداد للغة CSS تضيف قوةً وأناقةً إلى اللغة الأصلية. إذ تسمح لك باستخدام المتغيرات والقواعد المتشعّبة والمخاليط (mixins) والاستيراد المُدرج (inline imports) وغير ذلك، مع توافقٍ كامل مع صياغة CSS. تساعد Sass على تنظيم ملفات الأنماط الكبيرة تنظيمًا جيدًا، وتجعل ملفات الأنماط الصغيرة جاهزةً للاستعمال في أسرع وقت، لا سيما بمساعدة مكتبة Compass.

الميزات

  • التوافق التام مع CSS
  • توسيع للّغة بإضافة أشياء مثل المتغيرات، التشعّب والمخاليط (mixins)
  • العديد من الدوال المفيدة لمعالجة الألوان وغيرها من القيم
  • ميزات متقدمة مثل مُوجّهات التحكم (control directives) للمكتبات
  • منسقة جيدًا، مع إمكانية تخصيص المُخرجات

الصياغة (Syntax)

هناك صياغتان متاحتان لتقنية Sass. أولهما، الصياغة المعروفة باسم SCSS (اختصار Sassy CSS) والتي سنستخدمها في هذا التوثيق، هذه الصياغة هي امتداد للغة CSS. وهذا يعني أنّ كل ملف CSS صالح هو تلقائيًا ملف SCSS صالح دون تغييرٍ في المعنى. وبالإضافة إلى ذلك، SCSS يفهم معظم حيل CSS والصيغ الخاصة بالمتصفحات، مثل الخاصية filter القديمة الخاصة بالمتصفح IE. هذه الصياغة معزَّزة بميزات Sass الموضحة أدناه. امتداد الملفات التي تستخدم هذه الصياغة هو scss..

الصياغة الثانية والقديمة، والمعروفة باسم الصياغة الإزاحية indented syntax (أو فقط "Sass")، تتيح وسيلة أكثر إيجازًا لكتابة CSS. إذ تستخدم الإزاحة بدلًا من الأقواس المعقوفة للإشارة إلى التشعّب والمُحددات (selectors)، والأسطر الجديدة بدلًا من الفاصلة المنقوطة لفصل الخاصيات. يجد بعض الناس أنّ هذا أسهل للقراءة وأسرع في الكتابة من SCSS. الصياغة الإزاحية لديها نفس الميزات، على الرغم من أنّ بعضًا منها تصاغ بطريقة مختلفة قليلًا؛ وهذا مُوضَّح في مرجع الصياغة الإزاحية. امتداد الملفات التي تستخدم هذه الصياغة هو sass..

يمكن لكلا الصياغتين استيراد الملفات المكتوبة بالأخرى. ويمكن تحويل الملفات تلقائيًا من إحدى الصياغتين إلى الأخرى باستخدام أداة سطر الأوامر sass-convert: 

# Convert Sass to SCSS

$ sass-convert style.sass style.scss

# Convert SCSS to Sass

$ sass-convert style.scss style.sass

لاحظ أنّ هذا الأمر لا يُنشئ ملفات CSS. استخدم لأجل ذلك الأمر Sass الذي سنوضّحه في موضع آخر.

استخدام SASS

يمكن استخدام Sass بثلاث طرائق: كأداة سطر أوامر، أو كوحدةٍ مستقلة لروبي، أو كمُلحقة في أيّ بيئة عمل تدعم Rack، بما في ذلك Ruby on Rails و Merb. الخطوة الأولى لذلك كله ستكون تثبيت الجوهرة (gem)‏ Sass:

gem install sass

إن كنت تستخدم نظام ويندوز، فقد تحتاج إلى تثبيت روبي أولاً.

لتشغيل Sass من سطر الأوامر، يكفي أن تكتب الأمر الآتي:

sass input.scss output.css

يمكنك أيضًا إخبار Sass بمراقبة الملف وتحديث ملف CSS الناتج عند كل تغييرٍ في ملف Sass:

sass --watch input.scss:output.css

إن كان لديك مجلد يحتوي على عدة ملفات Sass، فيمكنك أيضًا إخبار Sass بمراقبة المجلد بأكمله:

sass --watch app/sass:public/stylesheets

للحصول على توثيقٍ شامل لجميع خيارات الأمر sass، أدخل الأمر sass --help.

إنّ استخدام Sass في الكود البرمجي لروبي بسيطٌ جدًّا. فبعد تثبيت الجوهرة Sass، يمكنك استخدامها بتشغيل require "sass"‎ واستخدام Sass::Engine كالآتي:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)

engine.render #=> "#main { background-color: #0000ff; }\n"

مُلحقات Rack/Rails/Merb

لإتاحة Sass في الإصدارات السابقة لإصدار Rails 3، أضف السطر التالي إلى environment.rb:

config.gem "sass"

أمّا في Rails 3، فأضف بدلًا من ذلك السطر التالي إلى Gemfile:

gem "sass"

لإتاحة Sass في Merb، أضف السطر التالي إلى الملف config/dependencies.rb:

dependency "merb-haml"

أمّا لإتاحة Sass في تطبيقات Rack، فأضف السّطرين التاليين إلى config.ru:

require 'sass/plugin/rack'

use Sass::Plugin::Rack

لا تعمل أنماط Sass بنفس طريقة عمل العروض (views). فهي لا تتضمّن محتوًى ديناميكيًا، لذا ليس من الضروري توليد CSS إلّا عند تحديث ملف Sass. افتراضيًا، توضع الملفات ‎.sass و ‎.scss في المجلد public/stylesheets/sass (يمكن تخصيص ذلك باستخدام الخيار ‎:template_location). ثمّ، عند الحاجة، يتم تصريفها (compile) في ملفات CSS موافقة في المجلد public/stylesheets. على سبيل المثال، سيُصرَّف الملف public/stylesheets/sass/main.scss إلى public/stylesheets/main.css.

التخزين المؤقت

افتراضيًا، تخزِّن Sass مؤقتًا القوالب المُصرّفة (compiled templates) والمجزوءات (partials). وهذا يُسرّع عمليّة إعادة تصريف المجموعات الكبيرة من ملفات Sass بشكلٍ كبيرٍ، ويعمل بشكل أفضل إذا قُسِّمَت قوالب Sass إلى ملفاتٍ منفصلة لأجل استيرادها - عبر ‎@import - في ملف واحدٍ كبير.

في غياب إطار عمل، تضع Sass القوالب المخزّنة مؤقتًا في مجلد sass-cache.. وفي روبي و Merb، تُخزَّن في tmp/sass-cache. يمكن تخصيص المجلد عبر الخيار ‎:cache_location. إن لم تكن ترغب في أن تستخدم تقنيةُ Sass التخزينَ المؤقت، فاضبط الخيار ‎:cache إلى القيمة false.

الخيارات

يمكن تعيين الخيارات عن طريق تحديد التلبيد (‏‎(Hash‏ Sass::Plugin#options في environment.rb في روبي أو config.ru في Rack...

Sass::Plugin.options[:style] = :compact

...أو عن طريق تعيين التلبيد [Merb::Plugin.config[:sass في init.rb في Merb…

Merb::Plugin.config[:sass][:style] = :compact

...أو عن طريق تمرير خيارات تلبيد إلى Sass::Engine#initialize. جميع الخيارات ذات الصّلة متاحةٌ أيضًا من خلال الرايات (flags) في سطري أوامر Sass و SCSS. الخيارات المتاحة هي:

  • ‎:style: تضبط تنسيق مُخرجات CSS. انظر تنسيق المخرجات.
  • ‎:syntax: صياغة ملف الإدخال، اختر ‎:sass لأجل الصياغة الإزاحية و ‎:scss لأجل الصياغة الممتدة للغة CSS. هذا مفيد فقط عندما ترغب في إنشاء نسخة من Sass::Engine بنفسك. تُضبط تلقائيًا بالشكل المناسب عند استخدام  Sass::Plugin. القيمة الافتراضية لهذه الخاصيّة  هي sass:.
  • ‎:property_syntax: تجبر الوثائق المكتوبة بالصياغة الإزاحيّة على استخدام صياغة واحدة لأجل الخاصيّات. إذا لم تُستخدَم الصياغة الصحيحة فسيُطلَق خطأ. تفرض new: استخدام النقطتين بعد اسم الخاصية. على سبيل المثال: color: #0f3 أو width: $main_width. أمّا old: فتفرض استخدام النقطتين قبل اسم الخاصية. على سبيل المثال: color #0f3: أو width $main_width:. افتراضيًا، كلا الصياغتان صالحتان. وهذا ليس له أيّ تأثيرٍ على وثائق SCSS.
  • cache:: تحدّد ما إذا كان ينبغي التخزين المؤقت لملفات Sass المُحلّلة (parsed)، لأجل سرعة أكبر. القيمة الافتراضية هي true.
  • read_cache:: إن ضُبِطَ هذا الخيار دون ضبط الخيار cache:، فهذا يعني أنَّ قراءة النّسخ المخزّنة مؤقتًا لتقنية Sass إن كانت موجودة، لكن مع عدم إمكانية الكتابة عليها إن لم تكن موجودة.
  • cache_store:: إن أُسنِد على هذه الخاصية نسخةٌ من صنف فرعي من Sass::CacheStores::Base، فمكانُ التخزين المؤقت هذا سيُستخدم لتخزين واسترجاع النتائج المصرّفة والمخزنة. القيمة الافتراضية هي  Sass::CacheStores::Filesystem والتي ستُهيئ باستخدام الخيار ‎:cache_location option.
  • never_update:: تحدد ما إذا كان ينبغي تحديث ملفات CSS، حتى لو تغيّر ملف القالب. إعطاء هذا الخيار القيمة true قد يعطي مكاسب صغيرة في الأداء. قيمته الافتراضيّة هي false. ولا معنى لها إلا في Rack،‏ أو Ruby on Rails، أو Merb.
  • always_update:: تُحدّد ما إذا كان ينبغي تحديث ملفات CSS عند الدخول إلى وحدة تحكم (controller)، في مقابل قصْر التحديث في حالة تعديل القالب. القيمة الافتراضية هي false. ولا معنى لها إلّا في Rack،‏ أو Ruby on Rails، أو Merb.
  • ‎:always_check‎: تحدّد ما إذا كان ينبغي التحقّق من إمكانية تحديث قالب Sass عند الدّخول إلى وحدة تحكم، في مقابل قصْر عمليّة التحديث عند بدء تشغيل الخادم. إذا حُدِّث قالب Sass، فسيُعاد تصريفه، وسيُكتب على ملف CSS المقابل. القيمة الافتراضية لهذه  الخاصيّة هي false في وضع الإنتاج (production mode)، أو true خلافًا لذلك. ولا معنى لها إلا في Rack،‏ أو Ruby on Rails، أو Merb.
  • ‎:poll: عندما تكون قيمتها true، دائمًا استخدم الاستطلاع الخلفي (polling backend) لأجل Sass::Plugin::Compiler#watch بدلًا من نظام الملفات الخلفي الأصلي.
  • ‎:full_exception: تحدد ما إذا كان الخطأ في الكود البرمجي للّغة Sass سيجعل Sass توفّر وصفًا مفصلًا داخل ملف CSS المُولّد. إذا أُعطِيتْ لهذه الخاصية القيمة true، فسيُعرَض الخطأ جنبًا إلى جنب مع رقم السطر ومقتطف من الكود المصدري على شكل تعليقٍ في ملف CSS وأيضًا في الجزء العلوي من الصفحة (في المتصفحات المدعومة). خلاف ذلك، سيُطلَق استثناء في الكود البرمجي في Ruby. القيمة الافتراضية لهذه الخاصية هي false في وضع الإنتاج، أو true خلاف ذلك.
  • ‎:template_location: مسارٌ إلى المجلد الجذري لقالب Sass الخاصّ بتطبيقك. في حال كانت تلبيدًا (hash)، فسيتم تجاهل ‎:css_location وسيُعيّن هذا الخيار رباطًا (mapping) بين مجلّدي المدخلات والمخرجات. يمكن أيضًا إعطاء هذه الخاصيًة قائمة مكوّنة من قوائم ثنائية (2-element lists) بدلًا من التلبيد. القيمة الافتراضية هي css_location + "/sass"‎. ولا معنى لها إلا في Rack،‏ أو Ruby on Rails، أو Merb. لاحظ أنّه في حال حُدِّدَت عدة مواقع للقالب، فستُوضَع جميعًا في مسار الاستيراد، ممّا يسمح لك بالاستيراد من بينها. تذكر أنّه نظرًا لتعدد الصيغ المحتملة التي يمكن أن يكون عليها، فيجب تعيين هذا الخيار بشكل مباشرٍ، وليس الدخول إليه أو تعديله. استخدم بدلًا من ذلك الدوال Sass::Plugin#template_location_array، و ‏Sass::Plugin#add_template_location و Sass::Plugin#remove_template_location.
  • ‎:css_location: تحدّد المسار حيث يجب أن تُكتب مُخرجات CSS. يتم تجاهل هذا الخيار في حالة كان ‎:template_location تلبيدًا. القيمة الافتراضية هي "‎./public/stylesheets". ولا معنى لها إلا في Rack،‏ أو Ruby on Rails، أو Merb.
  • ‎:cache_location: المسار حيث يجب أن تُكتب ملفات sassc المُخزّنة مؤقتًا. القيمة الافتراضية هي "‎./tmp/sass-cache" في Rails و Merb، أو "‎./.sass-cache" خلاف ذلك. في حال ضُبِطَ الخيار ‎:cache_store، فسيتم تجاهلها.
  • ‎:unix_newlines: إن كانت قيمتها true، فاستخدم نمط السطر الجديد المٌعتمد في أنظمة يونكس عند كتابة الملفات. لا معنى لها إلا في نظام ويندوز، وفقط عندما تتولى Sass كتابة الملفات (في Rack، أو‏ Rails، أو Merb، وذلك عند استخدام Sass::Plugin مباشرةً، أو عند استخدام سطر الأوامر).
  • ‎:filename: اسم الملف الذي يتم تقديمه. ويُستخدم فقط لأجل التبليغ عن الأخطاء، ويُعيّن تلقائيًا عند استخدام Rack، أو Rails أو Merb.
  • ‏‎:line: رقم السطر الأول من قالب Sass. يُستخدم للإبلاغ عن أرقام الأسطر في الأخطاء. تعيين هذا  مفيد في حال تمّ تضمين قالب Sass في ملف روبي.
  • ‎:load_paths: هو مصفوفة من مسارات الملفات أو المستورِدات التي ينبغي البحث فيها عن قوالب Sass المستوردة بالمُوجّه ‎@import. قد يكون ذلك سلسلة نصيّة، أو كائنات لأسماء المسارات، أو أصنافًا فرعية من Sass::Importers::Base. قيمة هذه الخاصيّة الافتراضية هي  مجلّد العمل الحالي، أمّا في Rack، أو‏ Rails، أو Merb فقيمتها هي قيمة ‎:template_location. مسار التحميل معلومٌ أيضًا من Sass.load_paths ومن متغيّر البيئة SASS_PATH.
  • ‎:filesystem_importer: صنفٌ فرعيٌّ مُشتقٌّ من الصنف Sass::Importers::Base يُستخدم لمعالجة السلاسل النصيّة الكاملة لمسارات التحميل. هذا الخيار يُفترض أن يُؤدي إلى استيراد الملفات من نظام الملفات (filesystem). هذا الصنف ينبغي أن يكون صنفًا كائنيًا (Class object) يرث من Sass::Importers::Base بحيث يقبل المنشئُ (constructor) خاصّته مُعطًى واحدًا على شكل سلسلة نصّية (مسار التحميل). قيمة هذه الخاصيّة الافتراضية هي Sass::Importers::Filesystem.
  • ‎:sourcemap: تتحكّم في كيفية إنشاء الخرائط المصدريّة (sourcemaps). هذه الخرائط تُبيّن للمتصفح كيفية العثور على أنماط Sass المسؤولة عن توليد كل نمط CSS على حدة. هناك ثلاث قيم صالحة لها: ‎:auto تستخدم روابط URI نسبية (relative URI) قدر الإمكان، على افتراض أنّ ملف الأنماط المصدري سيكون متاحًا على أيّ خادم تستخدمه، وأنّ موقعه النسبي سيكون كما هو في الملفات المحلية. إن لم تكن روابط URI النسبة متوافرةً، فسيُستخدم بدلًا من ذلك الروابط التي تبدأ بالبروتوكول "file:‎". تستخدِم الراية ‎:file  دائمًا البروتوكول "file:‎". والتي ستعمل محليًا ولكن لا يمكن نشرها إلى خادم بعيد. تتضمّن الراية ‎:inline النصّ المصدري الكامل الموجود في الخريطة المصدرية، وهي محمولة إلى أقصى حد ولكن يمكن أن تنشئ ملفات خرائط مصدرية كبيرةً جدًّا. وأخيرا، ‎:none تؤدي إلى عدم توليد أيّ خريطة مصدريّة بالمُطلق.
  • ‎:line_numbers:عند إعطائها القيمة true، تؤدي إلى إظهار رقم السطر والملف حيث عُرّف المُحدِّد (selector) في ملف CSS المُصرَّف على شكل تعليق. هذا مفيدٌ لأجل التنقيح، خاصةً عند استخدام الاستيرادات والمخاليط (mixins). ويمكن أيضًا أن يسمى هذا الخيار ‎:line_comments. تُعطَّل هذه الراية تلقائيًا عند استخدام نمط المُخرجات ‎:compressed أو الخيارات ‎:debug_info/:trace_selectors.
  • ‎:trace_selectors: عند إعطائها القيمة true، فسيُظهَر دليل كامل يحتوي الاستيرادات والمخاليط قبل كل محدّد. قد يكون هذا مفيدًا لأجل تنقيح الأخطاء داخل المتصفّح في ملفات الأنماط المستوردة وعند تضمين المخاليط (mixins). هذا الخيار يستبدِل الخيار ‎:line_comments ويُستبدَل بالخيار ‎:debug_info. وتُعطَّل تلقائيًا عند استخدام نمط المُخرجات ‎:compressed.
  • ‎:debug_info: عند إعطائها القيمة true، تؤدي إلى إظهار رقم السطر والملف حيث عُرّف المُحدد في ملف CSS المُصرّف في شكلٍ يمكن أن يفهمه المتصفح. وهي مفيدة عند اقترانها بالإضافة FireSass Firebug لأجل عرض اسم ملف Sass ورقم السطر. ستُعطَّل تلقائيًا عند استخدام نمط المُخرجات ‎:compressed.
  • ‎:custom: هي خيار متاح للتطبيقات الفردية لإتاحة البيانات لدوال Sass المخصّصة.
  • ‎:quiet: عند إعطائها القيمة true، فإنّها تعطّل التحذيرات (warnings).

اختيار الصياغة

ستستخدمُ أداة سطر الأوامر الخاصة باللغة Sass امتدادَ الملف لأجل تحديد الصياغة المُستخدمة، ولكنّ اسم الملف ليس متوافرًا دائمًا. الصياغة الافتراضية في سطر الأوامر للغة Sass هي الصياغة الإزاحية ولكن يمكنك أن تمرّر إليه الخيار ‎--scss إن كنت تريد أن تؤوّل المدخلات على أنها مكتوبة بالصياغة SCSS. بدلًا من ذلك، يمكنك استخدام برنامج سطر الأوامر الخاص باللغة SCSS والذي يشبه بالضبط برنامج Sass لكنّ الصياغة الافتراضية فيه هي الصياغة SCSS.

الترميزات

عند التشغيل على Ruby 1.9 أو ما بعدها، فإنّ Sass تُدرك ترميز الأحرف المستخدم في الملفات. Sass تتّبع مواصفات CSS لتحديد ترميز ملف الأنماط، وتَرجع إلى ترميز السلاسل النصية للغة Ruby. وهذا يعني أنّها ستتحقق من علامة ترتيب البايتات (byte order mark)، ثمّ التصريح ‎@charset، ثمّ ترميز سلاسل Ruby النصّية (أي Ruby string encoding). وإذا لم يُضبَط أيٌّ من هذه، فستفترض أنّ الوثيقة مكتوبة بترميز UTF-8.

لأجل تحديد ترميز ملفات الأنماط صراحةً، استخدم التصريح ‎@charset مثلما هو الحال في CSS. أضف السطر ‎@charset "encoding-name"‎ في بداية ملف الأنماط (قبل أي مسافة بيضاء أو تعليق) وستُفسِّره Sass على أنّه الترميز المُعين. لاحظ أنّه مهما كان الترميز الذي تستخدمه، فيجب أن يكون قابلًا للتحويل إلى اليونيكود.

ستكتب Sass دائمًا بالترميز UTF-8. وستشمل التصريح ‎@charset إذا وفقط إذا كان الملف يحتوي محارف من غير محارف ASCII. أما في الوضع المضغوط (compressed mode)، ستُستخدَم علامة ترتيب البايتات الخاصة بالترميز UTF-8 (أي UTF-8 byte order mark) بدلًا من التصريح ‎@charset.

مُلحقات CSS

القواعد المتشعّبة

Sass تسمح لقواعد CSS بأن تتشعّب داخل بعضها البعض. وفي تلك الحالة فإنّ القاعدة الداخلية لا تُطبّق إلّا ضمن المُحدّد الخارجي الذي يتضمّنها (outer rule's selector). على سبيل المثال:

#main p {

 color: #00ff00;

 width: 97%;

 .redbox {

   background-color: #ff0000;

   color: #000000;

 }

}

تُصرّف إلى:

#main p {

 color: #00ff00;

 width: 97%; }

 #main p .redbox {

   background-color: #ff0000;

   color: #000000; }

هذا يساعد على تجنّب تكرار المُحددات الأبويّة (parent selectors)، ويجعل مخططات CSS ‏(CSS layouts) المعقدة التي تحتوي الكثير من المُحدّدات المتشعّبة أكثر بساطة. على سبيل المثال:

#main {

 width: 97%;

 p, div {

   font-size: 2em;

   a { font-weight: bold; }

 }

 pre { font-size: 3em; }

}

تُصرّف إلى:

#main {

 width: 97%; }

 #main p, #main div {

   font-size: 2em; }

   #main p a, #main div a {

     font-weight: bold; }

 #main pre {

   font-size: 3em; }

الإشارة إلى المُحدّد الأب (Referencing Parent Selectors) باستخدام الرمز &

يكون من المفيد أحيانًا استخدام المُحدّد الأب لقاعدة متشّعبةٍ بطريقةٍ غير الطريقة الافتراضية. على سبيل المثال، قد ترغب في اعتماد أنماط خاصةٍ عندما يمر مؤشر الفأرة على ذلك المُحدِّد (الصنف الزائف ‎:hover) أو عندما يكون للعنصر body صنفٌ معيّن. في هذه الحالات، يمكنك أن تحدّد صراحةً أين ينبغي أن يُدرج المحدِّد الأب عبر استخدام الرمز &. على سبيل المثال:

a {

 font-weight: bold;

 text-decoration: none;

 &:hover { text-decoration: underline; }

 body.firefox & { font-weight: normal; }

}

ستُصرّف إلى:

a {

 font-weight: bold;

 text-decoration: none; }

 a:hover {

   text-decoration: underline; }

 body.firefox a {

   font-weight: normal; }

سيُبدّل الرمز & إلى المُحدِّد الأب كما يظهر في أسطُر CSS. وهذا يعني أنّه إن كان لديك قاعدةٌ عميقة التشعّب (أي أنَّها تتشعب أكثر من مستوى)، فستُستبين قيمة المحدِّد الأب بشكلٍ كاملٍ قبل استبدال المحرف &. على سبيل المثال:

#main {

 color: black;

 a {

   font-weight: bold;

   &:hover { color: red; }

 }

}

ستُصرّف إلى:

#main {

 color: black; }

 #main a {

   font-weight: bold; }

   #main a:hover {

     color: red; }

أمّا في حالة المُحدّدات المركّبة (compound selectors) فيجب أن تظهر & في البداية، ولكن يمكن أن تُتبع بلاحقة، والتي ستضاف إلى المحدِّد الأب. على سبيل المثال:

#main {

 color: black;

 &-sidebar { border: 1px solid; }

}

ستُصرّف إلى:

#main {

 color: black; }

 #main-sidebar {

   border: 1px solid; }

إن لم يكن من الممكن تطبيق لاحقةٍ على المحدِّد الأب، فستُطلِق Sass خطأً.

الخصائص المتشعّبة

اللغة CSS لديها عدد غير قليل من الخاصيات في "مجالات الأسماء" (namespaces)؛ على سبيل المثال، الخاصيات font-family و font-size و font-weight كلّها موجودةٌ في فضاء الأسماء font. في لغة CSS، إن كنت ترغب في ضبط مجموعة من الخاصيات في نفس مجال الأسماء، فسيكون عليك كتابته في كل مرة. توفّر Sass اختصارًا لهذه العمليّة: يكفي أن تكتب مجال الأسماء مرّة واحدة، ثم تضع داخله كل الخصائص الفرعيّة. على سبيل المثال:

.funky {

 font: {

   family: fantasy;

   size: 30em;

   weight: bold;

 }

}

ستُصرّف إلى:

.funky {

 font-family: fantasy;

 font-size: 30em;

 font-weight: bold; }

يمكن لخاصيّة مجال الأسماء (property namespace) نفسِها أن تُعطى قيمةً. على سبيل المثال:

.funky {

 font: 20px/24px fantasy {

   weight: bold;

 }

}

ستُصرّف إلى:

.funky {

 font: 20px/24px fantasy;

   font-weight: bold;

}

المُحدّد النائب (Placeholder Selectors): ‏‎%foo

تدعم التقنية Sass نوعًا خاصًّا من المُحدِّدات (selectors) يُسمّى "المحدِّد المُفسِح". هذه المحدِّدات تبدو كمحدّدات الأصناف (class selectors) ومحددات المُعرّفات (id selectors)، باستثناء أنّ الرمزين # و . سيُبدَّلان إلى الرمز %. يُفترض أن تُستخدم هذه المُحدّدات مع التعليمة ‎@extend. لمزيد من المعلومات راجع المُحدّدات المُعدّة للتوسيع (‎@extend-Only Selectors).

القواعد التي تستخدم المُحدّدات المُفسٍحة، دون استخدام الموجّه ‎@extend، لن تُترجم إلى لغة CSS.

التعليقات

تدعم Sass الشكل القياسي للتعليقات متعددة الأسطر (/* */) المُعتمد في اللغة CSS، وكذلك التعليقات أحادية السطر (//). يُحتفظ بالتّعليقات متعدّدة الأسطر في مُخرجات CSS حيثما كان ذلك ممكنًا، في حين تُزال التعليقات أحاديّة السطر. على سبيل المثال:

/* هذا التعليق

طوله عدِّة أسطر.‏

CSS ولمّا كان يستعمل بنية التعليقات في

فسيظهر في الملف المُصرَّف.‏ */

body { color: black; }

// هذه التعليقات طولها سطرٌ واحدٌ فقط.

// ولن تظهر في الملف المُصرَّف

// CSS لأنها تستخدم شكلًا لا تدعمه لغة

a { color: green; }

ستُصرّف إلى:

/* هذا التعليق

طوله عدِّة أسطر.‏

CSS ولمّا كان يستعمل بنية التعليقات في

فسيظهر في الملف المُصرَّف.‏ */

body {

 color: black; }

a {

 color: green; }

عندما يكون الحرف الأول من تعليقٍ متعدّد الأسطر هو !، فإنّ التعليق سيُدرج دائمًا في مُخرجات CSS حتى في وضع المُخرجات المضغوطة (compressed output modes). وهذا سيكون مفيدًا إن أردت إضافة إشعارات حقوق المِلكيّة والنّشر لملف CSS الناتج.

تُدرَج التّعليقات متعدّدة الأسطر في ملفّ CSS الناتج بعد استيفائها (interpolation). على سبيل المثال:

$version: "1.2.3";

/* This CSS is generated by My Snazzy Framework version #{$version}. */

ستُصرّف إلى:

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

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 الناتج.

الألوان

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

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

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

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

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

العمليات

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

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

تدعم 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. قبل قيمة معيّنة. هذا يعني عامل نفي أحادي. أي عاملًا يأخذ عددًا ويُرجع سالبه.

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

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

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);

}

العمليات على السلاسل النصيّة

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

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!"; }

العمليات المنطقية

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

عمليات القوائم

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

الأقواس

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

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

قواعد ومُوجّهات @ (‎@-Rules and Directives)

تدعم Sass جميع قواعد @ الخاصة بلغة CSS، فضلًا عن أخرى خاصة بلغة Sass تسمى المُوجّهات (directives). لهذه القواعد تأثيرات مختلفة في Sass، وقد فصّلناها في الأسفل. انظر أيضًا موجّهات المراقبة (control directives) وموجّهات المخاليط (mixin directives).

‎@import

توسّع Sass استخدامات القاعدة ‎@import الخاصة بلغة CSS للسماح لها باستيراد ملفات SCSS و Sass. ستُدمج جميع ملفات SCSS و Sass المُستورَدة معًا في ملف CSS واحدٍ. وإضافةً إلى ذلك، فالمتغيرات أو المخاليط (mixins) المُعرّفة في الملفات المستوردة يمكن استخدامها في الملف الرئيسي.

تبحث Sass عن ملفات Sass أخرى في المجلّد الحالي، وفي مجلّد ملفات Sass في التقنيات Rack و Rails و Merb. يمكن تعيين مجلدات بحث إضافية باستخدام الخيار ‎:load_paths أو الخيار ‎--load-path في سطر الأوامر.

تأخذ القاعدة ‎@import اسمَ الملف المراد استيراده. افتراضيًا، تبحث عن ملف Sass لأجل استيراده مباشرةً، ولكن هناك بعض الظروف التي ستجعلها تُصرَّف إلى القاعدة ‎@import الخاصّة بلغة CSS، وهي:

  • إن كان امتداد اسم الملف هو ‎.css.
  • إن بدأ اسم الملف بالبروتوكول http:‎//‎.
  • إن كان اسم الملف مكتوبا بالصياغة url(‎)‎.
  • إن كان للقاعدة ‎@import أيّ استعلامات وسائط (media queries).

إذا لم يُستوفى أيٌّ من الشروط المذكورة أعلاه وكان امتداد الملف هو ‎.scss أو ‎.sass، فحينها سيُستورد ملف Sass أو SCSS المُعيّن. وإذا لم يكن هناك أي امتداد، فستحاول Sass العثور على ملف بهذا الاسم وامتداده ‎.scss أو ‎.sass لتستورده.

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

@import "foo.scss"; 

أو

@import "foo";

كلاهما سيستوردان الملف foo.scss، في حين أنّ:

@import "foo.css";

@import "foo" screen;

@import "http://foo.com/bar";

@import url(foo);

ستُصرّف إلى:

@import "foo.css";

@import "foo" screen;

@import "http://foo.com/bar";

@import url(foo);

من الممكن أيضًا استيراد أكثر من ملف واحدٍ في قاعدة ‎@import واحدة. على سبيل المثال:

@import "rounded-corners", "text-shadow";

ستستورد الملفّين rounded-corners و text-shadow.

يجوز أن تحتوي التعليمة import على استيفاء ‎(#{})‎، ولكن مع بعض القيود. فلا يمكن استيراد ملف Sass ديناميكيًا باستعمال المتغيرات. الاستيفاء لا يصلح إلا في استيرادات CSS. وعلى هذا النحو، فهي لا تعمل إلّا مع استيرادات url(‎)‎. على سبيل المثال:

$family: unquote("Droid+Sans");

@import url("http://fonts.googleapis.com/css?family=#{$family}");

ستُصرّف إلى:

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

المجزوءات (Partials)

إن كنت تريد استيراد ملف SCSS أو Sass دون تصريفه إلى ملف CSS، فأضف شرطة سفلية إلى بداية اسم الملف. هذا سيخبر Sass أن لا تترجمه إلى ملف CSS عادي. يمكنك بعد ذلك استيراد تلك الملفات من دون استخدام الشرطة السفلية.

على سبيل المثال، إن كان لديك ملف ‎_colors.scss فلن يُنشَأ ملفٌ باسم ‎_colors.css ويمكنك كتابة:

@import "colors";

وسيُستورد الملف ‎_colors.scss.

تذكر أنّه لا يجوز استخدام ملف مجزوء (partial) وآخر غير مجزوء لهما نفس الاسم في نفس المجلّد. على سبيل المثال، لا يجوز أن يوجد الملف ‎_colors.scss في نفس المجلد مع colors.scss.

قواعد ‎@import المتشعّبة

على الرغم من أنه في أكثر الأحيان سيكون وضع ‎@import في المستوى الأعلى من الملف أفْيَد، لكن من الممكن إدراجها ضمن قواعد CSS وقواعد ‎@media. مثل قاعدة ‎@import في المستوى الأساسي (base-level @import)، وهذا يشمل محتويات الملف المُستورّد بواسطة ‎@import. ومع ذلك، ستتشعّبُ القواعد المستوردة في نفس مكان قاعدة ‎@import الأصلية.

على سبيل المثال، إن احتوى الملف example.scss على:

.example {

 color: red;

}

فإذًا:

#main {

 @import "example";

}

ستُصرّف إلى:

#main .example {

 color: red;

}

إنّ المُوجّهات (Directives) التي لا يُسمح باستخدامها إلا في المستوى الأساسي للملف، مثل ‎@mixin أو ‎@charset، لا يجوز استخدامها في الملفات المستوردة عبر ‎@import في سياق متشعب.

كما لا يجوز أن تتشعّب ‎@import داخل المخاليط (mixins) أو مُوجّهات المراقبة (control directives).

الموجّه ‎@media

تتصرّف موجّهات ‎@media في Sass مثلما تفعل في لغة CSS، مع قدرة إضافيةٍ واحدةٍ، وهي أنه يمكن أن تتشعّب داخل قواعد CSS. إن ظهر أحد موجّهات ‎@media ضمن قاعدةٍ من قواعد CSS، فستُعمّم صعودًا إلى أن تصل إلى أعلى مستوى في ملف الأنماط، وستضع جميع المٌحدّدات الموجودة في طريقها داخل القاعدة. وهذا سيُسهّل إضافة أنماطِ وسائط معيّنة دون الحاجة إلى تكرار المحددات أو كسر تسلسل ملف الأنماط. على سبيل المثال:

.sidebar {

 width: 300px;

 @media screen and (orientation: landscape) {

   width: 500px;

 }

}

ستُصرّف إلى:

.sidebar {

 width: 300px; }

 @media screen and (orientation: landscape) {

   .sidebar {

     width: 500px; } }

ويمكن أيضًا أن تتشعّب استعلامات ‎@media ‏(‎@media queries) داخل بعضها البعض. وحينها ستُجمع  الاستعلامات باستخدام العامل and. على سبيل المثال:

@media screen {

 .sidebar {

   @media (orientation: landscape) {

     width: 500px;

   }

 }

}

ستُصرّف إلى:

@media screen and (orientation: landscape) {

 .sidebar {

   width: 500px; } }

وأخيرًا، يمكن أن تحتوي استعلامات ‎@media على تعبيرات SassScript (بما في ذلك المتغيرات والدوال والعوامل) بدلًا من أسماء وقيم الميزات (features). على سبيل المثال:

$media: screen;

$feature: -webkit-min-device-pixel-ratio;

$value: 1.5;

@media #{$media} and ($feature: $value) {

 .sidebar {

   width: 500px;

 }

}

ستُصرّف إلى:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {

 .sidebar {

   width: 500px; } }

‎@extend

في بعض الحالات قد تحتاج إلى أن يكون لأحد الأصناف جميع أنماط صنفٍ آخرٍ إضافةٍ إلى أنماطه الخاصة. الطريقة الأكثر شيوعًا لفعل ذلك هي باستخدام الصنف العام والصنف الأكثر تحديدًا في كود HTML. على سبيل المثال، لنفترض أنّ لدينا تصميمًا مُخصّصًا للأخطاء العادية وآخر للأخطاء الخطيرة. لفعل ذلك يمكننا أن نكتب في ملف HTML ما يلي:

<div class="error seriousError">

تنبيه، لقد تمت قرصنتك

</div>

ونكتب التنسيق هكذا:

.error {

 border: 1px #f00;

 background-color: #fdd;

}

.seriousError {

 border-width: 3px;

} 

لسوء الحظ، فإنّ هذا يعني أنّ علينا أن نتذكر دائمًا استخدام المحدّد ‎.error مع ‎.seriousError. وهذا سيكون عبئًا على الصّيانة ويؤديَ إلى عيوب برمجية يصعب رصدها، ويمكن أن تؤثر سلبًا على مقروئية ملف HTML.

سيُجنّبنا الموجّه ‎@extend هذه المشاكل بإخبار Sass بأنّ أحد المُحدّديْن سيرث أنماط الآخر. على سبيل المثال:

.error {

 border: 1px #f00;

 background-color: #fdd;

}

.seriousError {

 @extend .error;

 border-width: 3px;

}

ستُصرّف إلى:

.error, .seriousError {

 border: 1px #f00;

 background-color: #fdd;

}

.seriousError {

 border-width: 3px;

}

وهذا يعني أنّ جميع الأنماط المعرّفة في المحدّد ‎.error ستُطبّق أيضًا على المحدّد ‎.seriousError بالإضافة إلى تلك الخاصة به، وفي الواقع، كل عناصر الصنف ‎.seriousError هي أيضًا عناصر من ‎.error.

القواعد الأخرى التي تستخدم ‎.error ستُطبّق كذلك على ‎.seriousError. على سبيل المثال، إن خصّصنا أنماطًا للأخطاء الناجمة عن القراصنة:

.error.intrusion {

 background-image: url("/image/hacked.png");

}

فستكون الصورة الخلفية للعنصر <div class="seriousError intrusion"‎> هي hacked.png كذلك.

كيف تعمل القاعدة ‎@extend

تعمل القاعدة ‎@extend عبر إدراج المُحدّد المُمتد (على سبيل المثال ‎.seriousError) في كل مكانٍ في ملف الأنماط يظهر فيه المحدّد الذي مُدِّد (مثل ‎.error). وبالتالي فالمثال:

.error {

 border: 1px #f00;

 background-color: #fdd;

}

.error.intrusion {

 background-image: url("/image/hacked.png");

}

.seriousError {

 @extend .error;

 border-width: 3px;

}

سيُصرّف إلى:

.error, .seriousError {

 border: 1px #f00;

 background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {

 background-image: url("/image/hacked.png"); }

.seriousError {

 border-width: 3px; }

عند دمج المُحدّدات، فإنّ القاعدة ‎@extend ذكية بما فيه الكفاية لتتجنّب التكرار غير الضروري، فالتعبير ‎.seriousError.seriousError سيُترجم إلى ‎.seriousError. وإضافة إلى ذلك، لن تنتج مُحدّدات لا يمكن أن تُطابق أيَّ شيء، مثل ‎#main#footer.

توسعة المحدّدات المُركّبة

بالإضافة إلى مُحدِّدات الأصناف (Class selectors). يمكن توسعة أيِّ محدّد فيه عنصر واحد فقط، مثل ‎.special.coolأو a:hover أو ‎.user[href^="http://"]‎. على سبيل المثال:

.hoverlink {

 @extend a:hover;

}

كما هو الحال مع الأصناف، هذا يعني أنّ جميع الأنماط المُعرّفة لأجل a:hover ستُطبّق أيضًا على المحدّد ‎.hoverlink. على سبيل المثال:

.hoverlink {

 @extend a:hover;

}

a:hover {

 text-decoration: underline;

}

ستُصرّف إلى:

a:hover, .hoverlink {

 text-decoration: underline; }

كما هو الحال مع المُحدّد ‎.error.intrusion أعلاه، كلّ قاعدةٍ تستخدم a:hover ستعمل أيضًا على ‎.hoverlink حتى لو كان لها مُحددّات أخرى. على سبيل المثال:

.hoverlink {

 @extend a:hover;

}

.comment a.user:hover {

 font-weight: bold;

}

ستُصرّف إلى:

.comment a.user:hover, .comment .user.hoverlink {

 font-weight: bold; }

التوسعة المتعددة (Multiple Extends)

يمكن لمُحدّدٍ واحدٍ أن يُمدِّد عدة محدّدات. وهذا يعني أنه سيرث أنماط جميع المحدّدات التي مُدِّدت. على سبيل المثال:

.error {

 border: 1px #f00;

 background-color: #fdd;

}

.attention {

 font-size: 3em;

 background-color: #ff0;

}

.seriousError {

 @extend .error;

 @extend .attention;

 border-width: 3px;

}

ستُصرّف إلى:

.error, .seriousError {

 border: 1px #f00;

 background-color: #fdd; }

.attention, .seriousError {

 font-size: 3em;

 background-color: #ff0; }

.seriousError {

 border-width: 3px; }

في الواقع، كل عنصرٍ من الصنف ‎.seriousError سيكون أيضًا من الصنفين ‎.error و ‎.attention. وهكذا، ستكون الأولوية للأنماط المُعرفة آخرًا في الملف، أي أنّ لون الخلفية للمحدّد ‎.seriousError سيكون هو اللون ‎#ff0 وليس ‎#fdd، لأنّ ‎.attention معرفة بعد ‎.error.

يمكن أيضًا كتابة التوسعة المتعددة باستخدام قائمةٍ من المُحدّدات مفصولةٍ بفواصل. على سبيل المثال ‎@extend .error, .attention مَثَلُها كَمَثَلِ ‎.error; @extend .attention.

التوسعات المتسلسلة (Chaining Extends)

من الممكن توسعة مُحدّد مُمدّد من قبل. على سبيل المثال:

.error {8

 border: 1px #f00;

 background-color: #fdd;

}

.seriousError {

 @extend .error;

 border-width: 3px;

}

.criticalError {

 @extend .seriousError;

 position: fixed;

 top: 10%;

 bottom: 10%;

 left: 10%;

 right: 10%;

}

الآن، فأيّ شيءٍ له الصنف ‎.seriousError سيكون لديه أيضًا الصنف ‎.error وكل شيء له الصنف ‎.criticalError سيكون لديه أيضًا الصنفان ‎.seriousError و ‎.error، المثال أعلاه سيُصرّف إلى:

.error, .seriousError, .criticalError {

 border: 1px #f00;

 background-color: #fdd; }

.seriousError, .criticalError {

 border-width: 3px; }

.criticalError {

 position: fixed;

 top: 10%;

 bottom: 10%;

 left: 10%;

 right: 10%; }

المحدّدات المتتابعة (Selector Sequences)

لا يمكن حاليًا توسعة المحدّدات المتتابعة، مثل ‎.foo .bar أو ‎.foo + .bar. بيْد أنّه من الممكن أن تستخدم المحدداتُ المتشعبةُ القاعدةَ ‎@extend. على سبيل المثال:

#fake-links .link {

 @extend a;

}

a {

 color: blue;

 &:hover {

   text-decoration: underline;

 }

}

ستُصرّف إلى:

a, #fake-links .link {

 color: blue; }

 a:hover, #fake-links .link:hover {

   text-decoration: underline; }

دمج المحدّدات المتتابعة (Merging Selector Sequences)

أحيانًا تُوسّع المحدّدات المتتابعة محدّدًا يظهرُ في محدِّدٍ متتابع آخر. في هذه الحالة، وجب دمج المُحدّدين المتتابعين. على سبيل المثال:

#admin .tabbar a {

 font-weight: bold;

}

#demo .overview .fakelink {

 @extend a;

} 

صحيحٌ أنّه من الممكن تقنيًا توليد كل المحددات التي يمكن أن تُطابق كلا المحدّدين المتتابعين، إلا أنّ ذلك سيجعل ملف الأنماط كبيرًا جدًّا. المثال أعلاه سيتطلب عشر محدّدات. ولكنّ Sass ستكتفي بتوليد المحدّدات التي يُحتمل أن تكون مفيدةً.

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

#admin .tabbar a {

 font-weight: bold;

}

#demo .overview .fakelink {

 @extend a;

}

ستُصرّف إلى:

#admin .tabbar a,

#admin .tabbar #demo .overview .fakelink,

#demo .overview #admin .tabbar .fakelink {

 font-weight: bold; }

أمّا إن اشترك المحدّدان المتتابعان في بعض المحددات، فستُدمج تلك المحددات معًا مع تعديل الاختلافات (إن وُجدت). في هذا المثال، كلا المحدّدين المتتابعين يحتويان على المُعرّف ‎#admin، وبالتالي فإنّ المحددات الناتجة  ستدمج هذين المعرّفين:

#admin .tabbar a {

 font-weight: bold;

}

#admin .overview .fakelink {

 @extend a;

}

ستُصرّف إلى:

#admin .tabbar a,

#admin .tabbar .overview .fakelink,

#admin .overview .tabbar .fakelink {

 font-weight: bold; }

المحدّدات المُعدّة للتوسعة (‎@extend-Only Selectors)

في بعض الأحيان، قد تحتاج إلى كتابة أنماط لأجل أصناف معدّة للتوسعة وحسب، ولا تريد استخدامها مباشرةً في كود HTML. هذا مفيدٌ بشكل خاص عندما تريد إنشاء مكتبةٍ لأجل Sass، حيث ستُوفّر أنماط ليُمدّدها المُستخدمون إن شاؤوا.

إن استخدمت أصنافًا عاديةً لأجل ذلك، فسينتهي بك الأمر بإنشاء ملف CSS كبير، مع إمكانية التداخل مع الأصناف الأخرى المستخدمة في كود HTML. لهذا السبب تدعم Sass المُحددات النائبة (placeholder selector) (على سبيل المثال ‎%foo).

تبدو المحددات النائبة مثل محددات الأصناف والمعرّفات، باستثناء أنّ الرمزين # أو . يُستبدلان بالرمز ‎%. ويمكن استخدامها في أي مكان تُستخدم فيه الأصناف أو المعرّفات، كما تمنع مجموعات القواعد (rulesets) من أن تُدرج في ملف CSS. على سبيل المثال:

// This ruleset won't be rendered on its own.

#context a%extreme {

 color: blue;

 font-weight: bold;

 font-size: 2em;

}

ومع ذلك، يمكن توسعة المحددات النائبة، تمامًا كمثل الأصناف والمُعرّفات (ids). ستُنشأ المحددات الممدودة، بخلاف المحدد النائب الأساسي (base placeholder selector). على سبيل المثال:

.notice {

 @extend %extreme;

}

ستُصرّف إلى:

#context a.notice {

 color: blue;

 font-weight: bold;

 font-size: 2em; }

الراية ‎!optional

عند توسعة مُحددٍ، إن لم تعمل القاعدة ‎@extend فسيُطلق خطأٌ في العادة. على سبيل المثال، إن كتبت important {@extend .notice}‎، سيحدث خطأٌ إن لم يكن هناك أيُّ محددٍ يحتوي ‎.notice. وسيحدث خطأ كذلك إن كان المحدد الوحيد الذي يحتوي ‎.notice هو h1.notice، لأنّ h1 تتداخل مع العنصر a، لذلك فلن يُنشأ أي محدّدٍ جديدٍ.

في بعض الأحيان، قد ترغب بالسماح للقاعدة ‎@extend بألا تنتج أيَّ محددات جديدةٍ. لفعل ذلك، يكفي أن تضيف الراية  optional! بعد المُحدد. على سبيل المثال:

a.important {

 @extend .notice !optional;

}

استخدام ‎@extend داخل المُوجّهات

هناك بعض القيود على استخدام ‎@extend ضمن المُوجّهات من مثل ‎@media. فلغة Sass غير قادرة على جعل قواعد CSS الموجودة خارج الكتلة ‎@media تنطبق على المحددات الموجودة بداخلِها دون جعل ملف الأنماط يتضخّم نتيجة نسخ الأنماط الموجودة. وهذا يعني أنّه إن استخدمت ‎@extend داخل ‎@media (أو غيرها من مُوجّهات CSS)، فلن تمُدّ إلا المحددات التي تظهر داخل نفس كتلة الموجّه.

على سبيل المثال، الكود البرمجي التالي يعمل جيدًا:

@media print {

 .error {

   border: 1px #f00;

   background-color: #fdd;

 }

 .seriousError {

   @extend .error;

   border-width: 3px;

 }

}

ولكنّ هذا خطأ:

.error {

 border: 1px #f00;

 background-color: #fdd;

}

@media print {

 .seriousError {

   // INVALID EXTEND: .error is used outside of the "@media print" directive

   @extend .error;

   border-width: 3px;

 }

}

نأمل أن تُدعم ‎@extend افتراضيًا في المتصفحات مستقبلًا، وهو ما سيسمح باستخدامها في ‎ @media وغيرها من المُوجّهات.

‎الموجّه ‎@at-root

يحذف ‎الموجّه ‎@at-root قاعدةً أو أكثر على مستوى جذر المستند، ويمنعها من أن تتشعّب داخل المحددات الأم. ويمكن أن تستخدم إمّا مع محددٍ مضمّنٍ (inline selector) واحدٍ، مثل:

.parent {

 ...

 @at-root .child { ... }

}

والذي سيُنتج:

.parent { ... }

.child { ... }

أو يمكن استخدامها مع كتلة تحتوي عدة مُحدّدات، مثل:

.parent {

 ...

 @at-root {

   .child1 { ... }

   .child2 { ... }

 }

 .step-child { ... }

}

والتي ستُنتج ما يلي:

.parent { ... }

.child1 { ... }

.child2 { ... }

.parent .step-child { ... }

‎@at-root (without: …)‎ و ‎@at-root (with: ...)‎

افتراضيًا، تُستخدم ‎@at-root لإقصاء المُحدّدات وحسب. بيْد أنّه يمكن أيضًا استخدامها‎ للخروج من المُوجّهات المتشعّبة مثل ‎ @media. على سبيل المثال:

@media print {

 .page {

   width: 8in;

   @at-root (without: media) {

     color: red;

   }

 }

}

ستُنتِج:

@media print {

 .page {

   width: 8in;

 }

}

.page {

 color: red;

}

يمكنك استخدام ‎@at-root (without: …)‎ للخروج من أيّ مُوجّه. كما يمكنك الخروج من عدة مُوجّهات مفصولة بمسافات بيضاء، فمثلًا ‎@at-root (without: media supports)‎ ستخرج المحدّد خارج الاستعلامَين ‎@media و ‎@supports.

يمكنك تمرير قيمتين خاصتين إلى ‎@at-root. وهما، "rule" التي تشير إلى قواعد CSS العادية. فالقاعدة ‎@at-root (without: rule)‎‎ مثلها كمثلِ ‎@at-root بدون أيِّ استعلام. أما ‎@at-root (without: all)‎‎ فتعني أنّ الأنماط يجب أن تُنقل خارج كل موجّهات وقواعد CSS.

إذا كنت ترغب في تحديد أيّ الموجّهات أو القواعد ينبغي أن تُشمل، بدلًا من تلك التي ينبغي أن تُستبعد، فيمكنك استخدام with بدلًا من without. على سبيل المثال، ستنقل ‎@at-root (with: rule)‎‎ المُحدّد خارج كل الموجّهات، ولكن ستحافظ على قواعد CSS.

‎@debug

يطبع المُوجّه ‎@debug قيمة تعبير من تعابير SassScript إلى مجرى الخطأ القياسي (standard error stream). وهو مفيدٌ لتنقيح ملفات Sass التي تتضمّن أكواد SassScript معقّدةً. على سبيل المثال:

@debug 10em + 12em;

المُخرجات ستكون:

Line 1 DEBUG: 22em

‎@warn

يطبع المُوجّه ‎‎@warn قيمة تعبير من تعابير SassScript إلى مجرى الخطأ القياسي. وهو مفيدٌ للمكتبات التي تحتاج إلى تحذير المستخدمين من إهمال بعض الخصائص في المكتبة (deprecations) أو التعافي من الأخطاء الصغيرة في استخدام المخاليط (mixins). هناك فرقان رئيسان بين ‎‎@warn و ‎@debug:

  1. يمكنك تعطيل التحذيرات من سطر الأوامر بواسطة الخيار ‎--quiet أو خيار Sass‏ ‎:quiet.
  2. سيُطبع أثرٌ لملف الأنماط (stylesheet trace) إلى جانب الرسالة حتّى يرى المستخدم الذي حُذِّر مكمن الخطأ.

مثال توضيحيّ:

@mixin adjust-location($x, $y) {

 @if unitless($x) {

   @warn "Assuming #{$x} to be in pixels";

   $x: 1px * $x;

 }

 @if unitless($y) {

   @warn "Assuming #{$y} to be in pixels";

   $y: 1px * $y;

 }

 position: relative; left: $x; top: $y;

}

‎@error

يبعث الموجّه ‎@error قيمةَ تعبيرٍ من تعابير SassScript باعتباره خطأً فادحًا (fatal error)، بما في ذلك أثر الخطأ (stack trace). هذا الموجّه مفيدٌ لأجل التحقق من وسائط (arguments) المخاليط (mixins) والدوال. على سبيل المثال:

@mixin adjust-location($x, $y) {

 @if unitless($x) {

   @error "$x may not be unitless, was #{$x}.";

 }

 @if unitless($y) {

   @error "$y may not be unitless, was #{$y}.";

 }

 position: relative; left: $x; top: $y;

}

لا توجد حاليًا أي وسيلة لمعالجة الأخطاء في Sass.

مُوجّهات وتعابير التحكم (Control Directives & Expressions) 

تدعم 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‎. يمكن أن يكون ‎$var أي اسم مُتغيّر، مثل ‎$length أو ‎$name، و <قائمة أو قاموس> هو تعبيرٌ من تعابير 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; }

مُوجّهات المخاليط (Mixin Directives)

تتيحُ المخاليط تعريف الأنماط التي يُمكن إعادة استخدامها في ملف الأنماط دون الحاجة إلى اللجوء إلى الأصناف غير الدلالية مثلِ ‎.float-left. يمكن أن تحتوي المخاليط أيضًا جميع قواعد CSS، وأيَّ شيء آخر يُسمح باستعماله في ملفات Sass. بل يمكن أن تأخذ وسائطَ (arguments) لتمكينك من إنتاج مجموعة واسعةٍ من الأنماط بعددٍ قليلٍ من المخاليط.

تعريف المخلوط (Defining a Mixin)

تُعرّف المخاليط (Mixins) بواسطة الموجّه ‎@mixin، متبوعًا باسم المخلوط، ويمكن اختياريًا إضافة وسائط (arguments)، ثمّ كتلةٌ من الأنماط تتضمّن محتويات المخلوط. على سبيل المثال، يُعرّف المخلوط large-text على النحو التالي:

@mixin large-text {

 font: {

   family: Arial;

   size: 20px;

   weight: bold;

 }

 color: #ff0000;

}

قد تحتوي المخاليط أيضًا على المُحدّدات، وعلى الخاصيات أحيانًا. بل يمكن أن تحتوي المُحددات على مؤشرت أبوية (parent references). على سبيل المثال:

@mixin clearfix {

 display: inline-block;

 &:after {

   content: ".";

   display: block;

   height: 0;

   clear: both;

   visibility: hidden;

 }

 * html & { height: 1px }

}

لأسباب تاريخية، أسماء المخاليط (وجميع مُعرّفات Sass الأخرى) يمكنها أن تحتوي الشرطاتِ العادية (hyphens) والشرطات السفلية (underscores) دون فرقٍ بينها. على سبيل المثال، إن عرّفت مخلوطًا تحت مُسمّى add_column، فيمكنك استعماله أيضًا بالإسم add_column، والعكس بالعكس.

تضمين المخاليط: ‎@include

تُضمّن المخاليط في الملف عبر المُوجّه ‎@include. هذا الموجّه يأخذ اسم مخلوطٍ ما ووسيط اختياري، ويُضمِّن الأنماط التي يُعرّفها المخلوط في القاعدة الحالية. على سبيل المثال:

.page-title {

 @include large-text;

 padding: 4px;

 margin-top: 10px;

}

ستُصرّف إلى:

.page-title {

 font-family: Arial;

 font-size: 20px;

 font-weight: bold;

 color: #ff0000;

 padding: 4px;

 margin-top: 10px; }

يُمكن أيضًا أن تُدرج المخاليط خارج كل القواعد (أي على مستوى جذر المستند) طالما أنّها لا تُعرّف مباشرةً أي خاصيات أو تستخدمُ أيَّ مؤشّرات أبوية (parent references). على سبيل المثال:

@mixin silly-links {

 a {

   color: blue;

   background-color: red;

 }

}

@include silly-links;

ستُصرّف إلى:

a {

 color: blue;

 background-color: red; }

يمكن أن تتضمّن تعريفات المخاليط مخاليط أخرى. على سبيل المثال:

@mixin compound {

 @include highlighted-background;

 @include header-text;

}

@mixin highlighted-background { background-color: #fc0; }

@mixin header-text { font-size: 20px; }

قد تتضمّن المخاليطُ نفسَها. وهذا مُخالفٌ لسلوك الإصدارات السابقة عن Sass 3.3، حيثُ كانت المخاليط التعاودية (mixin recursion) ممنوعةً.

المخاليط التي لا تعرّف إلّا المحددات المُنحدرة (descendent selectors) يمكن أن تُخلط بأمانٍ في المستوى الأعلى من المستند.

الوسائط (Arguments)

يُمكن أن تأخذ المخاليط قيم SassScript كوسائط، والتي تُعطَى عند تضمين المخلوط، وتُتاح داخل المخلوط كمتغيراتٍ.

عند تعريف مخلوطٍ ما، تُكتب الوسائط كأسماء متغيرات مفصولةٍ بفواصل، وموضوعةٍ كلّها بين قوسين بعد الاسم. ثم عند تضمين المخلوط يمكن تمرير القيم بنفس الطريقة. على سبيل المثال:

@mixin beautiful-border($color, $width) {

 border: {

   color: $color;

   width: $width;

   style: dashed;

 }

}

p { @include beautiful-border(blue, 1in); }

ستُصرّف إلى:

p {

 border-color: blue;

 border-width: 1in;

 border-style: dashed; }

يمكن للمخاليط أيضًا تعيين قيم افتراضيةٍ لوسائطها باستخدام الصياغة العادية لتعيين المتغيرات. ثمّ عند تضمين المخلوط، إذا لم يُمرّر الوسيط، فستُستخدم القيمة الافتراضية. على سبيل المثال:

@mixin beautiful-border($color, $width: 1in) {

 border: {

   color: $color;

   width: $width;

   style: dashed;

 }

}

p { @include beautiful-border(blue); }

h1 { @include beautiful-border(blue, 2in); }

ستُصرّف إلى:

p {

 border-color: blue;

 border-width: 1in;

 border-style: dashed; }

h1 {

 border-color: blue;

 border-width: 2in;

 border-style: dashed; }

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

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

p { @include beautiful-border($color: blue); }

h1 { @include beautiful-border($color: blue, $width: 2in); }

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

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

الفاصلة الزائدة

إذا كان الوسيط الأخير لمخلوطٍ أو دالةٍ وسيطًا موضعيًا (positional) أو مُسمًّى، فيُمكن أن يعقُب ذلك الوسيطَ فاصلةٌ زائدةٌ. البعض يُفضّل هذا الأسلوب في البرمجة لأنه يمكن أن يؤدي إلى تقليل الاختلافات والأخطاء في الصياغة عند تصريف الملف. 

الوسائط المتغيرة (Variable Arguments)

أحيانًا قد يكون من الأفضل ألّا يُحدَّد عدد وسائط المخلوط أو الدالةٍ. على سبيل المثال، قد يأخذ مخلوطٌ مُخصّصٌ لإنشاء ظلال المربعات أيَّ عددٍ من الظلال كوسائط. في هذه الحالات، تدعم Sass "الوسائط المتغيرة"، وهي الوسائط الموجودة في تصريح مخلوطٍ أو دالةٍ والتي تأخذ كل الوسائط المتبقية وتجمعها في قائمة. هذه الوسائط تبدو مثل الوسائط العادية، ولكنّها متبوعةٌ بثلاث نقاط (…). على سبيل المثال:

@mixin box-shadow($shadows...) {

 -moz-box-shadow: $shadows;

 -webkit-box-shadow: $shadows;

 box-shadow: $shadows;

}

.shadows {

 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);

}

ستُصرّف إلى:

.shadows {

 -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

 -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

 box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;

}

تحتوي الوسائط المتغيرة أيضًا كلَّ الوسائطِ المسمّاة المُمرّرةِ إلى المخلوط أو الدالة. ويمكن الوصول إليها باستخدام الدالة keywords($args)‎، التي تُعيدها كقواميس تربط سلاسل نصّية (أسماء الوسائط بدون $) بقيمٍ (الوسائط).

ويمكن أيضًا أن تُستخدم الوسائط المتغيرة عند استدعاء المخلوط. فباستخدام نفس الصياغة، يمكنك توسيع قائمةٍ مكوّنةٍ من قيم بحيث تُمرّر كل قيمة كوسيط منفصل، أو توسيع قاموسٍ مكوّن من قيم بحيث يُعامَل كل زوجٍ وكأنّه وسيطٌ مُسمّى. على سبيل المثال:

@mixin colors($text, $background, $border) {

 color: $text;

 background-color: $background;

 border-color: $border;

}

$values: #ff0000, #00ff00, #0000ff;

.primary {

 @include colors($values...);

}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);

.secondary {

 @include colors($value-map...);

}

ستُصرّف إلى:

.primary {

 color: #ff0000;

 background-color: #00ff00;

 border-color: #0000ff;

}

.secondary {

 color: #00ff00;

 background-color: #0000ff;

 border-color: #ff0000;

} 

يمكنك أن تُمرّر قائمةً من الوسائط ثم قاموسًا طالما سبّقت القائمة على القاموس، كما هو الحال في ‎@include colors($values..., $map...)‎.

يمكنك استخدام الوسائط المتغيرة لتغليف (wrap) المخلوط وإضافة أنماط إضافيةٍ دون تغيير شكل وسائط المخلوط. وإن فعلت ذلك، فستُمرّر الوسائط المُسمّاة مباشرةً خلال المخلوط المُغلَّف (wrapped mixin). على سبيل المثال:

@mixin wrapped-stylish-mixin($args...) {

 font-weight: bold;

 @include stylish-mixin($args...);

}

.stylish {

 // The $width argument will get passed on to "stylish-mixin" as a keyword

 @include wrapped-stylish-mixin(#00ff00, $width: 100px);

}

تمرير كتل الأنماط إلى المخلوط

من الممكن تمرير كتلةٍ من الأنماط إلى المخلوط لوضعها داخل الأنماط المُدرجة في المخلوط. ستظهر الأنماط في محلّ المُوجّهات ‎@content الموجودة داخل المخلوط. وهذا سيجعل من الممكن تحديد أشكال مُجرّدةٍ متعلقة بإنشاء المُحدّدات والمُوجّهات.

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

@mixin apply-to-ie6-only {

 * html {

   @content;

 }

}

@include apply-to-ie6-only {

 #logo {

   background-image: url(/logo.gif);

 }

}

ستُصرّف إلى:

* html #logo {

 background-image: url(/logo.gif);

}

ويمكن إنشاء نفس المخاليط باستخدام الصياغة المختصرة الخاصة بملفات ‎.sass:

=apply-to-ie6-only

 * html

   @content

+apply-to-ie6-only

 #logo

   background-image: url(/logo.gif)

ملاحظة: عندما يُحدَّد الموجّه ‎@content أكثر من مرةٍ واحدةٍ أو في حلقةٍ (loop)، فستُكرّر كتلة الأنماط عند كل استدعاء.

قد تتطلب بعض المخاليط أن تُمرّر إليها كتلةٌ من الأنماط وإلّا سيكون لها سلوكٌ مختلفٌ. ستُعيد الدالة content-exists()‎ القيمة true في حالة تمرير كتلةٍ من الأنماط إلى المخلوط الراهن، ويمكن استخدامها لتنفيذ مثل هذه السلوكيّات.

نطاقات المتغيرات وكتل الأنماط (Variable Scope and Content Blocks)

تُحدَّد قيمة كتل الأنماط التي مُرِّرت إلى المخلوط داخل النطاق حيث عُرِّفت الكتلة، وليس في نطاق المخلوط. هذا يعني أنّ المتغيرات المحلية في المخلوط لا يمكن استخدامها داخل كتلة الأنماط التي مُرِّرت وستُحال المتغيرات على القيمة الكليّة (global value):

$color: white;

@mixin colors($color: blue) {

 background-color: $color;

 @content;

 border-color: $color;

}

.colors {

 @include colors { color: $color; }

}

ستُصرّف إلى:

.colors {

 background-color: blue;

 color: white;

 border-color: blue;

}

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

#sidebar {

 $sidebar-width: 300px;

 width: $sidebar-width;

 @include smartphone {

   width: $sidebar-width / 3;

 }

}

مُوجّهات الدوال

من الممكن تعريف دوالّ خاصةٍ بك في Sass واستخدامها في أيِّ سياق أو على أيّ قيمة داخل الملف البرمجي. على سبيل المثال:

$grid-width: 40px;

$gutter-width: 10px;

@function grid-width($n) {

 @return $n * $grid-width + ($n - 1) * $gutter-width;

}

#sidebar { width: grid-width(5); }

ستُصبح:

#sidebar {

 width: 240px; }

لاحظ أنَّه يمكن للدوال الوصول إلى كل المتغيرات العامة وكذلك قبول الوسائط كما تفعل المخاليط (mixins). قد تحتوي الدالة على العديد من العبارات البرمجية، كما أنّه سيكون عليك أن تضع القيمة التي تريد أن تُعيدها الدالة في ‎@return.

كما هو الحال في المخاليط، يمكنك استدعاء الدوالّ المُعرّقة في Sass باستخدام الوسائط المُسمّاة. في المثال أعلاه كان بإمكاننا استدعاء الدالة هكذا:

#sidebar { width: grid-width($n: 5); }

ويُستحسن أن تجعل لاسم الدالة بادئةً لتجنب التداخل في الأسماء ولِيعلّم من يقرأ ملف الأنماط خاصتك أنها ليست جزءًا من Sass أو CSS. على سبيل المثال، إن كنت تعمل في شركة تُسمّى Hsoub، فلعلّك ترغب في إعطاء الدالة أعلاه الاسم ‎-hsoub-grid-width.

تدعم الدوال التي يُعرّفها المستخدمون أيضًا الوسائط المتغيرة كما تفعل المخاليط.

لأسباب تاريخية، يمكن لأسماء الدوال (وجميع معرفات Sass الأخرى) أن تستخدم الشرطات العادية والشرطات السفلية بدون فرقٍ. على سبيل المثال، إن عَرًفت دالةً تُسمى grid-width، فيمكنك استخدامها بالاسم grid_width، والعكس بالعكس.

أنماط الإخراج (Output Style)

على الرغم من أنّ النمط الافتراضي لمخرجات CSS في Sass لطيفٌ ويعكسُ بِنية المستند، لكن الأذواق والاحتياجات تختلف من شخص لآخر، لهذا تدعمُ Sass عدة أنماط أخرى.

تسمح لك Sass بأن تختار بين أربعة أنماط مختلفة للإخراج عن طريق ضبط الخيار ‎:style أو باستخدام الراية ‎--style في سطر الأوامر.

النمط ‎المتشعّب (Nested style)

النمط المُتشعّب هو نمطُ Sass الافتراضي، لأنّه يعكس بنية أنماط CSS ومستند HTML التي تُصمّممها. لكل خاصّية في هذا النمط سطرٌ خاصّ بها، ولكنّ الإزاحة (indentation) ليست ثابتةً. فكلّ قاعدةٍ تزاحُ بناءً عمق تشعّبها. على سبيل المثال:

#main {

 color: #fff;

 background-color: #000; }

 #main p {

   width: 10em; }

.huge {

 font-size: 10em;

 font-weight: bold;

 text-decoration: underline; }

النمط المتشعّب مفيدٌ جدًّا عند قراءة ملفات CSS الكبيرة: فهو يُسهّل عليك استيعاب بنية الملف دون قراءة أي شيء في الواقع.

النمط الموسّع (expanded style)

النمط المُوسّع هو نمطٌ اعتياديٌّ وأكثر شبهًا بنمط CSS العادي، حيث تأخذ كل خاصيةٍ سطرًا واحدًا. الخاصيات تُزاخ داخل القواعد، ولكنّ القواعد لا تزاح بأيِّ طريقةٍ خاصةٍ. على سبيل المثال:

#main {

 color: #fff;

 background-color: #000;

}

#main p {

 width: 10em;

}

.huge {

 font-size: 10em;

 font-weight: bold;

 text-decoration: underline;

}

النمط ‎:compact

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

#main { color: #fff; background-color: #000; }

#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

النمط ‎:compressed

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

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

توسيع Sass

توفر Sass عددًا من التّخصيصات المتقدمة لأجل المستخدمين ذوي المتطلبات الفريدة. استخدام هذه الميزات يتطلب فهمًا جيدًا للغة Ruby.

تعريف دوال مخصصةٍ في Sass

يمكن للمستخدمين تعريف دوال Sass خاصةً بهم باستخدام Ruby API. لمزيدٍ من المعلومات، انظر توثيق الدوال.

التخزين المؤقت (Cache Stores)

تُخزِّن Sass مؤقتًا الملفّات المُحلّلة (parsed documents) بحيث يمكن إعادة استخدامها دون إعادة تحليلها إلّا إن حدثت تغيرات في الملف. افتراضيًا، ستكتب Sass هذه الملفات المُخزّنة مؤقتًا في مكانٍ في نظام الملفات (filesystem) المشار إليه في ‎:cache_location. إن لم تكن قادرًا على الكتابة في نظام الملفات أو كنت تحتاج إلى مشاركة النّسخة المُخزّنة بين عمليات النظام (system processes) وعمليات Ruby، فيمكنك حينها تعريف المَخزَن المؤقت (cache store) الخاص بك وضبط الخيار ‎:cache_store. للحصول على مزيدٍ من التفاصيل حول إنشاء مخزنٍ مؤقتٍ، يرجى الاطّلاع على التوثيق المصدري.

المستوردات المخصصة (Custom Importers)

مستورِدات Sass هي المسؤولة عن أخذ المسارات المُمرَّرة إلى ‎@import وإيجاد الكود البرمجي للغة Sass المناسب لتلك المسارات. افتراضيًا، يُحمّّل هذا الكود من نظام الملفات، ولكن يمكن جعل المستوردات تُحمِّل من قاعدة بيانات معيّنةٍ أو عبر البروتوكول HTTP أو جعلها تستخدم نظام تسمية مختلف للملفّات عمّا هو مُتوقّعٌ في Sass.

يتولّى كل مستوردٍ مسارَ تحميلٍ واحدٍ (single load path، أو أيًّا كان المفهوم المقابل في السند الخلفي). يمكن وضع المستوردات في مصفوفات ‎:load_paths جنبًا إلى جنبٍ مع مسارات نظام الملفات العادية.

عند استبيان قيمة ‎@import، ستبحث Sass في مسارات التحميل عن مستوردٍ نجح في استيراد المسار. وعند إيجاد واحدٍ، فسيُستخدم الملف المُستورَد.

ينبغي على المستورِدات التي أنشأها المستخدمون أن ترث من Sass::Importers::Base.

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