Sass
Sass هي امتداد للغة CSS إذ تضيف قوةً وأناقةً إلى اللغة الأصليَّة وتسمح لك باستخدام المتغيِّرات والقواعد المتشعّبة والمخاليط (mixins) والاستيراد المُدرج (inline imports) وغير ذلك، مع توافقٍ كامل مع صياغة CSS. تساعد Sass على تنظيم ملفات الأنماط الكبيرة تنظيمًا جيِّدًا، وتجعل ملفات الأنماط الصغيرة جاهزةً للاستعمال في أسرع وقت، لاسيما بمساعدة مكتبة Compass.
- 72 ساعة فيديو تدريبية
- من الصفر دون الحاجة لخبرة مسبقة
- شهادة معتمدة من أكاديمية حسوب
- متابعة أثناء الدورة من فريق مختص
الميزات
- التوافق التام مع CSS.
- توسيع لغة CSS مثل إضافة المتغيرات، والتشعّب، والمخاليط (mixins) ...إلخ.
- وجود العديد من الدوال المفيدة لمعالجة الألوان وغيرها من القيم.
- تمتُّعها بميزات متقدمة مثل مُوجّهات التحكم (control directives) للمكتبات.
- منسَّقةٌ جيدًا، مع إمكانيَّة تخصيص المُخرجات.
الصياغة (Syntax)
هناك صياغتان متاحتان لتقنية Sass. أولاهما، الصياغة المعروفة باسم SCSS (اختصارًا للعبارة Sassy CSS) والتي سنستخدمها في هذا التوثيق. هذه الصياغة هي امتداد للغة CSS، وهذا يعني أنّ كل ملف CSS صالح هو ملف SCSS صالح تلقائيًّا دون تغييرٍ في المعنى. وبالإضافة إلى ذلك، تفهم صياغة SCSS معظم حيل CSS والصيغ الخاصَّة بالمتصفحات، مثل الخاصِّيَّة filter القديمة الخاصَّة بالمتصفح IE. تعزَّز هذه الصياغة بميزات Sass الموضَّحة أدناه. امتداد الملفات التي تستخدم هذه الصياغة هو scss..
الصياغة الثانية قديمة ومعروفة باسم الصياغة الإزاحيَّة indented syntax (أو صياغة "Sass" فقط)، وتتيح وسيلة أكثر إيجازًا لكتابة CSS إذ تستخدم الإزاحة بدلًا من الأقواس المعقوفة للإشارة إلى التشعّب والمُحدِّدات (selectors)، والأسطر الجديدة بدلًا من الفاصلة المنقوطة لفصل الخاصيَّات. يجد بعض الناس أنّ هذا أسهل للقراءة وأسرع في الكتابة من SCSS. الصياغة الإزاحيَّة لديها الميزات نفسها التي تملكها الصياغة 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، وخيارات الضبط المتاحة فيها، واختيار الصياغة المناسبة، والترميز الملائم.
ملحقات CSS في Sass
شرح القواعد والخصائص التشعُّبية، وطريقة استعمال المُحدِّد النائب، والإشارة إلى المُحدِّد الأب.
التعليقات
تبيان نوعي التعليقات المتاحين في Sass.
صياغة SassScript
تسمح صياغة SassScript باستخدام المتغيِّرات، ومختلف أنواع البيانات مع إجراء عمليات عليها، ويمكن عبرها استدعاء المخاليط (mixins) والدوال.
قواعد @-Rules
تسمح هذه القواعد باستيراد (@import) ملفات Sass الأخرى، وتوسعة (@extend) المُحدِّدات، وتوفير ميزات أكثر لاستعلامات الوسائط (@media)، وتوفير طرائق لإخراج رسائل التنقيح (@debug) والتحذيرات (@warn) والأخطاء (@error).
موجهات التحكم
تستعمل موجهات وتعابير التحكُّم لتطبيق شرط معيّن (@if) أو تكرار تعبير برمجي مُحدَّد (الحلقات @for و @each و @while).
المخاليط (Mixins)
تتيحُ المخاليط تعريف الأنماط التي يُمكن إعادة استخدامها في ملف الأنماط دون الحاجة إلى اللجوء إلى الأصناف التي لا يدل اسمها على محتواها.
موجهات الدوال في Sass
تسمح موجهات الدوال بتعريف دوال خاصَّة بالمستخدم واستخدامها في أيِّ سياق أو على أيّ قيمة داخل الملف البرمجي.
أنماط المخرجات
تسمح بتخصيص بنية مستندات CSS الناتجة. تتيح Sass أربعة أنماط لتنسيق المخرجات.
توسعة Sass
توفِّر Sass عددًا من التخصيصات المتقدِّمة لأجل المستخدمين ذوي المتطلبات الفريدة، مثل تخصيص التخزين المؤقَّت، والمستوردات المخصَّصة.
قائمة الدوال
توفِّر Sass عددًا كبيرًا من الدوال المُضمَّنة في اللغة، التي تغطي أغلبية احتياجات المستخدمين.