Sass/usage

يمكن استخدام 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) ثمّ يتم تصريفها (compiled)، عند الحاجة، إلى ملفات 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 لأجل الصياغة SCSS. هذا مفيد فقط عندما ترغب في إنشاء نسخة من 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 وفي الجزء العلوي أيضًا من الصفحة (في المتصفحات المدعومة). خلاف ذلك، سيُطلَق استثناء في الكود البرمجي في روبي. القيمة الافتراضيَّة لهذه الخاصيَّة هي 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.

الترميزات

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

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

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

مصادر

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