تثبيت وضبط واستخدام Sass

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

تثبيت Sass

الخطوة الأولى لاستخدام Sass ستكون تثبيت الجوهرة (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.
• 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.

مصادر

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