الفرق بين المراجعتين لصفحة: «Sass»

مراجعة 05:36، 10 أبريل 2018

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 الذي سنوضّحه في موضع آخر.

@@ سطر 20: / سطر 20: @@
 $ sass-convert style.scss style.sass
 </syntaxhighlight>لاحظ أنّ هذا الأمر لا يُنشئ ملفات CSS. استخدم لأجل ذلك الأمر Sass الذي سنوضّحه في موضع آخر.
+== [[Sass/usage|تثبيت وضبط واستخدام Sass]] ==
+شرح طريقة تثبيت Sass، وخيارات الضبط المتاحة فيها، واختيار الصياغة المناسبة، والترميز الملائم.
+== [[Sass/CSS extensions|ملحقات CSS في Sass]] ==
+شرح القواعد والخصائص التشعبية، وطريقة استعمال المُحدِّد النائب، والإشارة إلى المُحدِّد الأب.
+== [[Sass/comments|التعليقات]] ==
+تبيان نوعي التعليقات المتاحين في Sass.
+== [[Sass/SassScript|صياغة SassScript]] ==
+تسمح صياغة SassScript باستخدام المتغيرات، ومختلف أنواع البيانات مع إجراء عمليات عليها، ويمكن عبرها استدعاء [[Sass/mixins|المخاليط]] (mixins) [[Sass/functions|والدوال]].
+== [[Sass/@ rules|قواعد ‎@-Rules]] ==
+تسمح هذه القواعد باستيراد (<code>‎@import</code>) ملفات Sass الأخرى، وتوسعة (<code>‎@extend</code>) المُحدِّدات، وتوفير ميزات أكثر لاستعلامات الوسائط (<code>‎@media</code>)، وتوفير طرائق لإخراج رسائل التنقيح (<code>‎@debug</code>) والتحذيرات (<code>‎@warn</code>) والأخطاء (<code>‎@error</code>).
+== [[Sass/control directives|موجهات التحكم]] ==
+يمكن أن تستعمل موجهات وتعابير التحكم لتطبيق شرط معيّن (<code>‎@if</code>) أو تكرار تعبير برمجي مُحدَّد (الحلقات <code>‎@for</code> و <code>‎@each</code> و ‎<code>@while</code>).
+== [[Sass/mixins|المخاليط (Mixins)]] ==
+تتيحُ المخاليط تعريف الأنماط التي يُمكن إعادة استخدامها في ملف الأنماط دون الحاجة إلى اللجوء إلى الأصناف التي لا يدل اسمها على محتواها.
+== [[Sass/function directives|موجهات الدوال في Sass]] ==
+تسمح موجهان الدوال بتعريف دوال خاصة بالمستخدم واستخدامها في أيِّ سياق أو على أيّ قيمة داخل الملف البرمجي.
+== [[Sass/output style|أنماط المخرجات]] ==
+يمكن تخصيص بنية مستندات CSS الناتجة، وتتيح Sass أربعة أنماط لتنسيق المخرجات.
+== [[Sass/extending|توسعة Sass]] ==
+توفر Sass عددًا من التّخصيصات المتقدمة لأجل المستخدمين ذوي المتطلبات الفريدة، مثل تخصيص التخزين المؤقت، والمستوردات المخصصة.