تثبيت وضبط واستخدام 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.