نوضح في مقال اليوم ما هي لغة Sass، وماهي استخداماتها، ولماذا تستخدم كبديل للغة CSS في تنسيق الواجهات الأمامية لمواقع الويب، فإذا كنت مهتمًا بمعرفة ماذا تعني Sass؟ وما الفرق بين لغة CSS و Sass وما هي أساسيات Sass التي عليك تعلمها، وماهي مصادر تعلمها باللغة العربية، والعديد من المعلومات المفيدة الأخرى حولها فهذا المقال سيفيدك بكل تأكيد.

ما هي لغة Sass؟

لغة Sass هي اختصار لعبارة Syntactically awesome style sheets وتعني أوراق الأنماط الرائعة من الناحية النحوية وهي بمثابة توسعة أو تطوير للغة تنسيق صفحات الويب CSS وهي لغة مفتوحة المصدر تخضع لترخيص MIT -بالرغم من ذلك هنالك إصدارات معينة من لغة Sass تخضع لتراخيص ملكية، وتوفر مرونة وسهولة أكبر في التعامل معها- ولكي تفهم ماذا تعني Sass يجب أن تعرف بدايةً ما هي لغة CSS وما الهدف منها؟

ففي الأساس لغة CSS وهي اختصار لعبارة Cascading Style Sheet أي لغة تنسيق الأنماط المتعاقبة، هي اللغة الأساسية المستخدمة لتنسيق وتصميم عناصر المواقع الإلكترونية الممثلة بلغةHTML فلو كنت تصمم موقعًا إلكترونيًا خاصًا بك وأردت تغيير لون خلفية عنصر معين على إحدى صفحات هذا الموقع أو تغيير الخطوط المستخدمة في الكتابة أو تنسيق القوائم أو تعديل تموضع عنصر معين ضمن الصفحة، أو غيرها من التعديلات على مظهر موقعك فعليك كتابة كافة أكواد التنسيق المطلوبة باستخدام لغة CSS.

لكن عندما تتعامل مع شيفرات CSS في تصميم صفحات الويب فستلاحظ أنها تعاني من محدودية وقيود عديدة لا سيما عند الحاجة لكتابة الكثير من التنسيقات إذ سيصبح التعامل معها مربكًا ومعقدًا وتصعب عملية صيانتها وتصحيح أخطائها لكونها لغة تنسيقية بحتة ولا تملك إمكانيات برمجية، وللتخفيف من هذه المشكلات والقيود ظهرت لغة Sass لكي تضيف العديد من المميزات الجديدة للغة CSS، مثل ميزة تداخل الكود وميزة التصريح عن الثوابت والمتغيرات وإمكانية تعريف الدوال وغيرها من المميزات المتقدمة التي سنوضحها بالأمثلة العملية في الفقرات التالية، والتي من شأنها أن تقلل حجم الكود وتنظم وتبسّط عملية كتابة التنسيقات اللازمة لتصميم مواقع الويب وصيانتها.

باختصار Sass هي لغة تحسينية للغة CSS ولكن تجدر الإشارة لأنك ستحتاج لأن تترجم كل أكواد Sass إلى لغة CSS كي تتمكن من تطبيقها على عناصر صفحة الويب، أي لا يمكنك استخدم أكواد Sass مباشرة في صفحات موقعك كما هو الحال في CSS وستحتاج لاستخدام تقنيات مخصصة للقيام بعملية التحويل.

طريقة تحويل لغة Sass إلى CSS

قد تتساءل لماذا يتوجب عليَّ تحويل كود Sass إلى CSS وإليك السبب، يمكن لجميع متصفحات الويب الحديثة عرض أكواد CSS دون أي مشكلات، لكن هذا لا ينطبق على لغة Sass لذا تحتاج قبل ذلك لإجراء عملية تحويل أو ترجمة لكافة أكواد Sass إلى أكواد اللغة القياسية CSS ثم تطبيق هذه التنسيقات على عناصر الموقع الإلكتروني.

لهذا السبب تعد لغة Sass بمثابة معالج مسبق للغة CSS أو ما يعرف بمصطلح CSS pre-processor لأنك تحتاج إلى تحويل أو ترجمة أكوادها المتقدمة للشكل المتبع في أكواد CSS التقليدية قبل عرض العناصر على صفحة الويب.

حيث يتوجب عليك بداية كتابة تنسيقات أو أكواد Sass في ملف بالامتداد ‎.sass ثم ترجمتها أو تجميعها في ملف CSS وبعدها سيتم تحميل شيفرة CSS إلى المتصفح لتنسيق عناصر HTML، ولكي تتمكن من إجراء عملية التحويل تحتاج إلى تثبيت مترجم Sass على جهازك لترجمة كود Sass إلى كود CSS القياسي.

وتتوفر عدة طرق يمكنك من خلالها تثبيت مترجم Sass على أنظمة التشغيل ويندوز Windows وماك Mac ولينكس Linux، إما من خلال تطبيق واجهة رسومية مثل scout-app أو من خلال استخدام أداة سطر الأوامر مثل Dart Sass أو Node sass وتختلف طريقة التثبيت بحسب نظام التشغيل وبيئة التطوير ومدير الحزم الذي تستخدمه.

على سبيل المثال إذا كنت تستخدم مدير الحزم شوكولاتي Chocolatey لنظام ويندوز فيمكنك تثبيت Dart Sass عن طريق كتابة الأمر التالي:

choco install sass

اختر الطريقة التي تناسبك للتثبيت، وبعد اكتمال التثبيت سيكون بإمكانك تحويل ملفات sass إلى CSS من خلال كتابة التعليمة التالية:

 sass file_name.sass file_name.css

مثال على تحويل ملف Sass إلى CSS

على سبيل المثال لنفترض أن لدينا لدينا ملف Sass يسمى style.sass يحتوي على التنسيقات التالية:

// ملف styles.sass

$primary-color: blue

body
  font-family: Arial, sans-serif

.container
  width: 100%
  max-width: 960px
  margin: 0 auto

.button
  padding: 10px 20px
  background-color: $primary-color
  color: white
  border: none
  border-radius: 5px

لمعالجة هذا الملف وتحويله إلى كود CSS قياسي، افتح نافذة سطر الأوامر وانتقل إلى المجلد الذي يحتوي على ملف style.sass ثم نفذ هذا الأمر:

 sass style.sass style.css

يحول هذا الأمر ملف style.sass إلى ملف style.css يحتوي على الكود التالي:

/* ملف styles.css */

body {
 font-family: Arial, sans-serif;
}

.container {
 width: 100%;
 max-width: 960px;
 margin: 0 auto;
}

.button {
 padding: 10px 20px;
 background-color: blue;
 color: white;
 border: none;
 border-radius: 5px;
}

بهذا تكون قد حولت ملف Sass إلى CSS بكل بساطة وبتعليمة واحدة فقط.

كما توفر Sass ميزة ضغط أو تقليص حجم ملفات CSS الناتجة عن طريق إزالة المسافات الزائدة والتنسيقات غير الضرورية وهذا يساعد في تقليل زمن تحميل ملفات التنسيق وتحسين أداء موقع الويب.

فلتحويل ملف Sass إلى CSS مضغوط، يمكنك إضافة خيار إضافي لتفعيل ضغط الملفات كما يلي:

 sass style.sass styles.css --style compressed

يحدد الخيار  style compressed--   في الكود أعلاه بأن كود Sass يجب أن يُنتج لنا ملف CSS مضغوطًا يحتوي على نسخة مختصرة من شيفرات CSS إذا ستكون الشيفرة الناتجة بدون أي مسافات زائدة أو تنسيقات غير ضرورية، وهذا يقلل من حجم الملف الناتج ويساعد في تسريع تحميل الموقع.

الفرق بين Sass و SCSS و Less

كل من Sass و SCSS و Less هي مُعالجِات مسبقة للغة CSS لكنها تختلف عن بعضها بالقليل من المميزات والتي سنشرحها لك تباعًا.

أولًا: الفرق بين Sass و SCSS

بدايةً يتمثل الفرق بين Sass و SCSS في اعتمادهما على طريقة مختلفة لكتابة التنسيقات فلغة Sass تعتمد في تنظيم كتل الكود على المسافات البادئة Indented Syntax، ولها امتداد ملف sass. أما صيغة SCSS فهي صيغة أحدث وأكثر انتشارًا وتعرف باسم Sassy CSS وتعتمد على الأقواس المتعرجة {} لتجميع وتنطيم كتل الكود، وتستخدم الفواصل المنقوطة لفصل القواعد وهي تشبه CSS القياسية أكثر ولها امتداد ملف scss. فكلاهما بالتالي متشابهان ويفعلان نفس الشيء، لكنهما مكتوبتان بأسلوب مختلف.

فيما يلي مثال بسيط على كود مكتوب بأسلوب Sass:

$primary-color: blue

body
  font-family: Arial, sans-serif
  color: $primary-color

.header
  background-color: $primary-color
  padding: 10px


  nav
 ul
  margin: 0
  padding: 0
  list-style: none

 li
  display: inline-block

في حين يبين المثال التالي كود مكتوب بأسلوب SCSS:

$primary-color: blue;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;
}

.header {
  background-color: $primary-color;
  padding: 10px;
}

nav {
 ul {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 li {
  display: inline-block;
 }

ثانيًا: الفرق بين Sass و Less

أما بالنسبة للفرق بين Sass و Less فكلاهما معالجان مسبقان شائعان تستخدمان لتسهيل عملية كتابة CSS وجعلها أكثر تنظيمًا وقابليةً للصيانة، لكنهما تختلفان أيضًا ببعض الجوانب حيث أن Sass مبنية على لغة روبي Ruby، بينما Less مبنية على لغة جافاسكريبت JavaScript كما أن Sass أكثر شعبيةً وانتشارًا من Less، وقد زادت شعبيتها بعد أن اعتمد عليها بوتستراب Bootstrap وتكتب شيفرات Less بنفس أسلوب Scss.

باختصار الفرق بين Sass و Scss و Less هو الصياغة النحوية لكل منها، وإن كانت في نهاية المطاف كلها معالجات مسبقة تحول إلى CSS لكن تستخدم Sass صيغة نحوية خاصة به حيث يتم حذف الأقواس والفاصلات المنقوطة، بينما تشبه SCSS صيغة CSS مما يجعلها أسهل قراءةً وفهمًا، وأخيرًا تمتلك LESS صيغة نحوية مشابهة لصياغة SCSS، لكنها مبينة باستخدام لغة جافا سكريبت ويعتمد اختيار اللغة المناسبة من بينها على تفضيلاتك ومتطلباتك الشخصية.

ما هي أساسيات Sass

تضيف لغة Sass مجموعة من القواعد والمفاهيم الأساسية والإمكانيات التي لا توفرها لغة CSS كما وضحنا سابقًا، وفيما يلي أوضح أهم أساسيات Sass مع أمثلة عملية بسيطة توضح كيفية استخدام ميزات Sass المختلفة في توسيع أكواد CSS.

1. المتغيرات

يمكنك تخزين معلومات التنسيق في المتغيرات باستخدام Sass وإعادة استخدامها لاحقًا. على سبيل المثال، يمكنك تخزين قيمة لون كمتغير كما في الكود التالي الذي يعرف متغيرين باسم my-fore-color$ و my-back-color$ ويسند لهما قيم لونية مختلفة.

$my-fore-color: #3445db;
$my-back-color: #78a3d1;

.container {
  background-color: $my-back-color;
}

.text {
  color: $my-fore-color;
}

عند معالجة ملف Sass أعلاه، سيأخذ القيم المذكورة في المتغيرين my-fore-color$ و my-back-color$ ويستخدمها في الأماكن التي يذكر فيهما اسم كل متغير فيها وينسق ألوان العناصر بناءً عليها، ماذا لو أردت بعدها تغيير لون الخلفية أو لون النص في موقعك؟ يكفي أن تعدل القيمة التي أسندتها للمتغير فقط بكل سهولة.

2. العمليات الحسابية

يمكن استخدام الدوال الحسابية كالجمع والضرب والقسمة في Sass لتنفيذ عمليات حسابية على قيم تنسيقات العناصر وتعديلها. على سبيل المثال، يحدد الكود التالي حجم الخط المستخدم في الموقع بشكل ديناميكي بناءً على حجم الخط الأساسي:

$base-font-size: 16px;

.element {
  font-size: $base-font-size + 2px;
}

3. الحلقات التكرارية

توفر Sass إمكانية استخدام الحلقات التكرارية لتكرار كود التنسيقات عدد من المرات وهو أمر غير متاح في لغة CSS، للتوضيح لاحظ الكود التالي الذي يطبق مجموعة من التنسيقات على ثلاثة عناصر، بحيث يتزايد عرض كل عنصر عن السابق بمقدار 50 بكسل.

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px + $i * 50px;
  }
}

4. التعليمات الشرطية

توفر Sass أيضًا إمكانية كتابة تعليمات شرطية مثل if و else بطريقة مماثلة لطريقة عملها في مختلف لغات البرمجة، وبهذه الطريقة تمكنك من تحقيق تنسيقات شرطية وتُنفذ التنسيقات المحددة فقط عند تحقق حالات معينة، على سبيل المثال يغير الكود التالي تنسيق العناصر في الوضع الليلي أو النهاري بحسب قيمة المتغير ‎dark-theme$.

$dark-theme: true;

@if $dark-theme {
  color: #b3b3b3;
  font-weight: 300;
  background-color: #333333;
}
@else {
  color: #333333;
  font-weight: 400;
  background-color: #f5f5f5;
}

5. الدوال Functions

توفر لك Sass إمكانية تعريف دوال برمجية يمكنها استقبال وسطاء أو بارامترات وإرجاع قيمة معينة، وهذا يسهل تطبيق التنسيقات على العناصر وإعادة استخدامها في أكواد التنسيق الخاصة بك. على سبيل المثال نعرف في الكود التالي دالة باسم add-numbers تستقبل وسيطين هما ‎first-number$ و ‎second-number$. وترجع مجموعهما:

@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}

بعد تعريف هذه الدالة يمكننا استخدامها في كتابة قواعد التنسيق، لنفرض مثلًا أننا نريد استبدال قيمة الخاصية padding بمجموع قيمتين منفصلتين، سنستدعي الدالة ونمرر لها قيم الوسطاء بهذا الشكل:

.box1 {
  padding: add-numbers(20px, 10px);
}

ولتفهم الأمر أكثر سيكون CSS الناتج عن تحويل الكود أعلاه على النحو التالي:

box1 {
  padding: 30px;
}

6. المخاليط mixins

تمثل المخاليط mixins في Sass قوالب تحتوي على خليط أو تجمّع لعدة خصائص CSS متكررة بحيث يمكنك إعادة استخدامها في أماكن متعددة داخل الكود .ولتعريف مزيج في Sass نكتب كالتالي:

@mixin name {
    properties;
}

ولاستداعئه نكتب كود كالتالي:

element {
    @include name;
}

لنوضح الأمر بمثال عملي، لاحظ في المثال التالي كيف عرّفنا خليط وأسميناه button-styles ووظيفته هي تعريف مجموعة من خصائص التنسيق للأزرار مثل لون الزر والخط المستخدم في الكتابة عليه وحجمه وغيرها من الخصائص:

@mixin button-styles($background-color, $text-color, $font-size, $padding) {
 background-color: $background-color;
 color: $text-color;
 font-size: $font-size;
 padding: $padding;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 transition: background-color 0.3s ease;

بعدها يمكننا بسهولة استخدام هذا الخليط من القيم في تنسيق أي زر في الموقع وليكن الزر الذي يملك الصنف button-primary. من خلال كتابة التعليمة include@ وتمرير القيم المناسبة للمتغيرات كما يلي:

.button-primary {
 @include button-styles(#3498db, #ffffff, 16px, 10px 20px);
}

كما يمكن تنسيق زر آخر وليكن الزر الذي يملك الصنف button-secondary.بتمرير قيم مختلفة على هذا النحو:

.button-secondary {
 @include button-styles(#2ecc71, #ffffff, 14px, 8px 16px);
}

بهذه الطريقة أعدنا استخدام مجموعة الخصائص وطبقناها على أنماط متعددة بسهولة وبحجم كود قليل جدًا مقارنة بالكود المكافئ الذي سنكتبه بلغة CSS.

7. ميزة الأكواد المتشعبة Nesting

لا تسمح CSS بالعمل مع التداخلات في الكود، بينما تمكننا Sass من كتابة أكواد متشعبة وفق تسلسل هرمي، لاحظ الكود التالي المكتوب بلغة CSS:

.header {
 background-color: #333;
}

.header h1 {
 color: white;
}

.header p {
 font-size: 16px;
}

يمكن كتابته بكود Sass مكافئ باستخدام ميزة التضمين داخل المحدد header. كما يلي:

.header {
  background-color: #333;
  h1 {
    color: white;
  }
  p {
    font-size: 16px;
  }
}

هذا يعني أن جميع قواعد لغة CSS التي تظهر داخل header. تنطبق على العناصر داخل header. فقاعدة h1 هنا سنطبق على العناصر h1 الموجودة داخل عنصر يملك الصنف header.فقط، وقاعدة  p ستنطبق على العناصر p الموجودة داخل عنصر له الصنف header. فقط، والكتابة بهذا الأسلوب كما تلاحظ تجعل الكود أكثر تنظيمًا وسهولة في القراءة.

كانت هذه أهم أساسيات لغة Sass، ولمطالعة المزيد حول أساسيات Sass ننصحك بمشاهدة الفيديو التالي:

مميزات Sass

توفر لنا لغة Sass مجموعة من المميزات من أبرزها:

• توفر لغة Sass مرونة في كتابة تنسيقات عناصر الموقع.
•  إمكانية حفظ قيم التنسيقات في متغيرات بدلاً من استخدام قيم محددة.
• تُمكنك من توليد شيفرة منظمة وسهلة الفهم والصيانة.
•  تُمكنك من توليد شيفرة قابلة لإعادة الاستخدام وتجنب تكرار الكود.
• سهلة الصيانة والتعديل حيث يتم التعديل في مكان واحد بدلاً من عدة أماكن.
• سهلة التعلم لا سيما إذا كنت ملمًا بأساسيات لغة CSS.
• متوافقة مع جميع إصدارات CSS ويمكنك استخدام أي مكتبات CSS متاحة.

عيوب Sass

من بين عيوب أو سلبيات لغة Sass نذكر التالي:

•  لا يمكن تنفيذ أكواد Sass مباشرة بل يجب ترجمة الكود المكتوب إلى CSS قبل استخدامه، مما يضيف خطوة إضافية لعملية التطوير.
• عند إجراء أي تغييرات في تنسيق الموقع تحتاج من جديد لترجمة التغييرات.
• صعوبة التصحيح فقد تؤدي الترجمة إلى ظهور أخطاء وتجعل عملية التصحيح أصعب
• قد يستغرق تعلم استخدام مميزات Sass والتآلف معها لبعض الوقت.

تعلم Sass

إذا كنت مهتمًا بتعلم لغة Sass واحتراف التعامل مع شيفراتها البرمجة فإليك مجموعة من الخطوات التي عليك اتباعها لتحقيق هذفك:

• تعلم طريقة تثبيت Sass حسب بيئة التطوير ونظام التشغيل الذي تستخدمه.
• تعلم أساسيات البرمجة والتفكير المنطقي فهي تساعدك على فهم مبادئ Sass.
• تعلم القواعد الصياغية ومبادئ وأساسيات Sass وتدرب على أمثلة تطبيقية بسيطة حولها.
• ابدأ بكتابة أكواد Sass بسيطة تتضمن مفاهيم أساسية مثل تعريف المتغيرات في Sass والتعليمات الشرطية والحلقات في Sass وغيرها من المفاهيم، وتحويلها إلى ملفات CSS وافهم آلية عملها.
• انتقل إلى كتابة أكواد أكثر تعقيدًا تتضمن الدوال وخليط الميزات وغيرها من المفاهيم المتقدمة.
• طبَّق كل ما تعلمته على مشاريع فعلية، فالفوائد الحقيقى ستظهر لك عند العمل على مشاريع أكبر وأكثر تعقيدًا.

ستجد في أكاديمية حسوب الكثير من المصادر التعليمية التي تساعدك على تعلم لغات تطوير الواجهة الأمامية من دورس ومقالات وكتب متنوعة، كما توفر الأكاديمية دورة متكاملة تأخذ بيدك خطوة بخطوة لتتعلم كل التقنيات التي تحتاجها لتصبح مطور واجهات أمامية محترف مع التطبيق العملي لمشاريع متنوعة تساعدك على بناء معرض أعمال مميز وشهادة معتمدة في ختام الدورة تثبت خبرتك وتعزز فرصتك في الحصول على فرصة عمل.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

الخلاصة

أرجو أن يكون هذا المقال قد وضح لك ماذا تعني Sass وكيفية التعامل معها واستخدامها لتحسين وتسريع عملية تنسيق صفحات المواقع بدل استخدام لغة CSS القياسية، ووضح لك أهم الفروقات بين Sass و SCSS و Less وكيفية استخدام كل منهما وما هي أهم خطوات تعلمها. إذا كان لديك سؤال حول هذه التقنية المفيدة في تصميم الواجهات الأمامية يمكنك تركه في قسم التعليقات أسفل المقال أو كتابته في قسم الأسئلة والأجوبة في أكاديمية حسوب.

اقرأ أيضًا

• توثيق Sass باللغة العربية
• مدخل إلى Sass
• أمثلة لبعض الدوال المساعدة (mixins) عند كتابة CSS باستخدام SASS
• لا تكرّر نفسك (DRY): أعد استخدام دوالّ Sass التي كتبتها

يشرح الفيديو لغة Sass التي هي أساسًا امتداد للغة CSS، حيث يوضح الفيديو ميزاتها وفوائد استخدامها، إلى جانب الفرق بينها وبين CSS.

لعلّ من أقوى ميّزات Sass الدّوالّ (mixins) ﻷنّها تسمح بتحديد نمط مُتكرِّر وعزله في صورة قطعة برمجيّة يمكن إعادة استخدامها مرارًا. مثال ذلك: عزل كلّ الخصائص المسؤولة عن تنسيق زرّ في صفحة الويب ثمّ —بدل الحاجة لتذكّر كل هذه الخصائص— جمعها في قطعة منفصلة يمكن استدعاؤها في مُحدِّد آخر (selector). هذا يحفظ أنماط الزرّ في موضع واحد ممّا يجعل تعديلها وتحديثها أسهل.

المشكلة في هذا أنّ كثيرًا من دوّال Sass هذه تُكتب بأسلوب يجعل الخصائص مُكرّرة، وهذا قد يؤدي إلى حدوث أخطاء في عدة مواضع عند تحويلها إلى CSS بالإضافة إلى زيادة حجم الملفّ النّهائي دون طائل. صحيح أنّ استخدام Sass هو خطوةٌ على الطّريق الصّحيح لإنتاج CSS أخفّ حجمًا وأكثر اختصارًا ممّا قد يكتبه مبرمج متوسّط المستوى، لكنّك إن كنت مهووسًا بتحسين الأداء مثلي، فلن ترضى بوجود أدنى مقدار من التّكرار الّذي لا مُبرِّر له. سأدلكّ في هذه المقالة على كيفيّة تحسين مستوى CSS النّاتج عن دوالّ Sass الّتي تكتبها.

مقدّمة سريعة عن Sass

يمكن وصف Sass بأنّها مرحلة وسيطة بين ورقة الأنماط الّتي يكتبها مُصمّم الموقع وناتج CSS النّهائي الّذي يطلبه المتصفّح، وتفيد Sass في هذه المرحلة بإضافة العديد من الميّزات الّتي تُسهلّ كتابة CSS وصيانتها. واحدة من فوائد Sass أنّها تُساعِد الُمصمّمين في تجنّب التّكرارات في CSS، ممّا يجعل صيانتها أكثر سهولة. اصطلح على مبدأ "لا تُكرِّر نفسك" (Don't Repeat Yourself أو اختصارًا DRY) في كتاب "المُبرمج البراغماتيّ"، والذي نصّ على التّالي:

كلّ مفهوم يجب أن يُمثّله مُكوِّنٌ مفردٌ واضح ضمن النّظام.

لا تُساعِدنا CSS كثيرًا في تطبيق هذا المبدأ، لأنّها تُضطرّنا إلى تكرار كتابة الكثير من الخصّائص (كما في مثال الأزرار الذي ضربناه). فلو احتجت إلى إنشاء أنماط لثلاثة أنواع من الأزرار، فستضطر إلى كتابة هذه الأنماط مرّة لكلّ نوع من الأزرار، أو تجزئة الأنماط على أكثر من مُحدّد. وهما أمران أحلاهما مُرٌّ. فالأوّل يعني نسخ الخصائص ولصقها (وزيادة حجم الملفّ بالنتيجة) وتكرار مواضع الأخطاء، وغياب مصدر واحدٍ للحقيقة، وبنية هشّة في حصيلة الأمر؛ وأمّا الثاني فيعني غياب تمثيل مُفرد ومُوحَّد لكلّ نوع من الأزرار في النّظام، لأنّه يُجبرك على تجزئة الأنماط على عدّة مُحدِّدات، وهو ما يجعل البنية هشّة أيضًا، لأنّ تكوينها غير واضح.

لو أردنا تحرّي المثاليّة، فعلينا إيجاد طريقة لتعريف الأنماط الأساسيّة في موضع واحد دون تكرار، ثمّ تعريف مُحدِّد مُفرد يمكن استخدامه لتطبيق كلّ الأنماط.

لماذا قد أرغب باتّباع مبدأ "لا تُكرِّر نفسك"؟

قد تسأل نفسك: لم كلّ هذا التّعقيد؟ الجواب باختصار: لأنّ اتّباع مبدأ DRY يُحسّن من أداء الموقع. فعندما تؤسّس هيكل الموقع، سيكون الأداء عاملًا مُهمًّا، بدءًا من صيغ الصّور الّتي نختارها ومرورًا بطريقة كتابة مُحدِّدات CSS. وهذا العاملّ يُصبح أكثر أهمّية عندما نتحدّث عن الأجهزة المحمولة، ففي هذه الأجهزة قد يفرض مُجرّد طلب HTTP بسيط تحدّيات كبيرةً في الأداء، وخطأ الاعتقاد الشّائع بعدم أهمّيّة حجم ملفّ CSS في أداء الموقع يظهر أكثر وضوحًا في الأجهزة المحمولة الّتي لا تسمح بأكثر من 100 ميغابايت من الحجم الكلّي للتّخزين المؤقّت لكلّ المواقع، وعندها يجب استغلال أكبر مقدار ممكن من مساحة التّخزين المؤقّت بأفضل صورة.

الهدف من ذلك إذن هو إنشاء مُحدِّدات يمكن صيانتها في Sass وفي HTML، ويمكن تمثيلها في CSS بأقصر أسلوبٍ ممكن لتقليل حجم التّخزين المؤقّت.

الدّوال (mixins) والتّوسعة (extends): حلّان غير كاملين

تٌقدّم دوالّ Sass حلًّا لإحدى هاتين المُشكلتين، فهي تسمح بإنشاء موضع واحد يمكن فيه تعريف الأنماط الأساسيّة والرّجوع إليها. يمكن لهذه الدّوال أن تقبل مُعاملات (arguments) كذلك، مما يسمح باختلافات طفيفة بين استدعاء وآخر للدّالة وإنشاء أشكال مختلفة لنفس النّمط. لكن الأمر لا يخلو من مُشكلات: فقد تُسبّب هذه الدّوال تكرارًا غير مُبرّر للخصائص لأنّها ستكتب الخصائص الّتي تحويها في كلّ موضع استدعيت فيه. فالدّوالّ إذن تحل مشكلة التُمثيل المُفردّ في مبدأ DRY، لكنّها تترك خصائص متكرّرة في النّاتج النّهائيّ من CSS.

ولهذا تُقدّم Sass مفهومًا آخر يُساعِد في تطبق مبدأ DRY: التّوسعة (extends)، والّتي يمكن استخدامها بكتابة الكلمة ‎@extend، والّتي تسمح لمُصمّم CSS أن يقول: "أريد للُمحدّد A أن يظهر كما يظهر المُحدّد B"، وعندها تقوم Sass بإنشاء نمط جديد يجمع بين A وB (مفصول بينهما بفاصلة)، ثمّ كتابة الخواصّ غير المشتركة بالأسلوب العاديّ. لا يمكن تمرير مُعاملات للتّوسعة (خلافًا للدّوالّ)، فهي حلّ من نوع "الكلّ أو لا شيء".

.couch {
    padding: 2em;
    height: 37in;
    width: 88in;
    z-index: 40;  
}

.couch-leather {
    @extend .couch;
    background: saddlebrown;
}

.couch-fabric {
    @extend .couch;
    background: linen;
}

.couch, 
.couch-leather, 
.couch-fabric {
    padding: 2em;
    height: 37in;
    width: 88in;
    z-index: 40;
}

.couch-leather {
    background: saddlebrown;
}

.couch-fabric {
    background: linen;
}

تحلّ التّوسعة مشكلة تكرار الخصائص والمُحدِّد المُفرّد في CSS النّاتج، لكنّها لا تُخلّص مُصمّمي المواقع من الحاجة لصيانة مجموعتين منفصلتين من الأنماط في ملفّات Sass، ولا من الحاجة لتذكّر أيّ الخصائص ينطبق على أيّ نوع—فالأمر لا يختلف كثيرًا فيما لو كتبنا محدّدين منفصلين في الأساس.

كما نرى، فكلا الحّلين (الدّوالّ والتّوسعة) غير كاملين، ولكن عند جمعهما معًا ثمّ اعتماد بنيّة ذكيّة في تصميم مشروعنا، مع الاستفادة من بعض ميّزات Sass سنحصل على دالّة نهائيّة تخضع لمبدأ DRY تمامًا، وتجمع نصفي الحلّ في صيغة موحّدة سواءٌ في ملفّات Sass الأصليّة أو في ناتج CSS.

المكوّنات الأساسيّة لمبدأ "لا تُكرِّر نفسك"

تضع المُكوّنات الأربعة التّالية حجر الأساس لبناء دوالّ موافقة لمبدأ DRY في Sass: المُحدّدات بالنّيابة (placeholder selectors)، والجداول (maps)، والكلمة ‎@at-root، والدّالة unique-id()‎.

المُحدّدات بالنّيابة

وهي نوعٌ خاصّ من المُحدّدات يُستخدم مع الكلمة ‎@extend في Sass. تُكتب هذه المُحدّدات كما تُكتب الأصناف التّقليديّة (classes)، ولكنّها تبدأ بالرّمز % بدل النّقطة .، وتتصرّف عند توسعتها بصورة عاديّة، ولكنّها لا تُضاف إلى النّاتج النّهائيّ إلّا عند توسعتها. وكما في التّوسعة العاديّة، تُضاف خواصّ المحدّدات في الموضع الّذي عُرّف فيه المُحدّد.

%foo {
    color: red;
}

.bar {
    @extend %foo;
    background: blue;
}

.baz {
    @extend %foo;
    background: yellow;
}

.bar, 
.baz {
    color: red;
}

.bar {
    background: blue;
}

.baz {
    background: yellow;
}

الجداول (maps)

وهي نوعٌ من أنواع البيانات في Sass ‎3.3 (مثلها مثل الأرقام والسلاسل النّصيّة والقوائم) تتصرّف بطريقة مُشابهة للكائنات في JavaScript. تتألّف الجداول من أزواج مفتاح/قيمة (key/value)، حيث يمكن للمفتاح والقيمة أن يكونا أي نوع من أنواع البيانات في Sass (بما في ذلك الجداول نفسها). المفاتيح فريدة دومًا ويمكن الوصول إليها باسمها، ممّا يجعلها مثاليّة لتخزين البيانات المُميّزة واسترجاعها.

$properties: (
    background: red,
    color: blue,
    font-size: 1em,
    font-family: (Helvetica, arial, sans-serif)
);

.foo {
    color: map-get($properties, color);
}

الكلمة ‎@at-root

قُدّمت هذه الكلمة في Sass ‎3.3، وهي تقوم بنقل الخواصّ المُعرّفة ضمنها إلى جذر ورقة الأنماط (أعلى مستوىً فيها)، بغض النّظر عن الموضع الّذي استخدمت فيه.

الدّالّة unique-id()‎

قدّمت في Sass ‎3.3 كذلك، وهي تُعيد مُعرّف CSS يُضمن كونُه فريدًا في كلّ عمليّة تحويل من Sass إلى CSS.

كتابة دالّة بسيطة

يتطلّب تحويل نمط مُتكرِّر إلى دالّة النّظرَ في الأنماط الأساسيّة المُكوّنة لها ثم تحديد ما المشترك بينها وما الذي يختلف بحسب مُدخَلات المستخدم. سنستخدم زرًّا بسيطًا كمثال في حالتنا:

.button {
    background-color: #b4d455;
    border: 1px solid mix(black, #b4d455, 25%);
    border-radius: 5px;
    padding: .25em .5em;

    &:hover {
        cursor: pointer;
        background-color: mix(black, #b4d455, 15%);
        border-color: mix(black, #b4d455, 40%);
    }
}

لتحويل هذا إلى دالّة، اختر الخصائص الّتي يتحكّم بها المستخدم (الديناميكيّة)، والخصائص الثّابتة. يُتحكّم بالخصائص الدّيناميكيّة عبر مُعامِلات تُمرّر إلى الدّالة، أمّا الخصائص الثّابتة فتكتب بالأسلةب العاديّ. في حالة الزّرّ الذي نُصمّمه، لا نريد سوى أن يتغيّر اللّون، ولهذا نستدعي الدّالّة بمُعامل اللّون، لُينتَج CSS كما نتوقّع:

@mixin button($color) {
    background-color: $color;
    border: 1px solid mix(black, $color, 25%);
    border-radius: 5px;
    padding: .25em .5em;

    &:hover {
        cursor: pointer;
        background-color: mix(black, $color, 15%);
        border-color: mix(black, $color, 40%);
    }
}

.button {
    @include button(#b4d455);
}

لا بأس بهذا الحلّ، ولكنّه سيؤدّي إلى تكرار خصائص كثيرة، افترض مثلًا أنّنا نريد إنشاء زرّ آخر بلون مختلف، عندها ستبدو شيفرة Sass كما يلي (دون تعريف الدّالّة):

.button-badass {
    @include button(#b4d455);
}

.button-coffee {
    @include button(#c0ffee);
}

وستبدو شيفرة CSS كما يلي:

.button-badass {
    background-color: #b4d455;
    border: 1px solid #879f3f;
    border-radius: 5px;
    padding: .25em .5em;
}
.button-badass:hover {
    cursor: pointer;
    background-color: #99b448;
    border-color: #6c7f33;
}

.button-coffee {
    background-color: #c0ffee;
    border: 1px solid #90bfb2;
    border-radius: 5px;
    padding: .25em .5em;
}
.button-coffee:hover {
    cursor: pointer;
    background-color: #a3d8ca;
    border-color: #73998e;
}

هناك الكثير من الخصائص المُكرَّرة هنا، لا نريد هذا! لذا سنلجأ إلى استخدام المُحدِّدات بالنّيابة.

إزالة التّكرار من دالّة

إزالة التّكرار من الدّالة يقتضي تجزئتها إلى أجزاء ثابتة وأخرى ديناميكيّة. الأجزاء الدّيناميكيّة هي ما سيستدعيه المستخدم، وأمّا الثّابتة فتحوي الأجزاء الّتي ستكون مُكرّرة فيما لو لم نجمعها في دالّة.

@mixin button($color) {
        @include button-static;

    background-color: $color;
    border-color: mix(black, $color, 25%);

    &:hover {
        background-color: mix(black, $color, 15%);
        border-color: mix(black, $color, 40%);
    }
}

@mixin button-static {
    border: 1px solid;
    border-radius: 5px;
    padding: .25em .5em;

    &:hover {
        cursor: pointer;
    }
}

الآن وقد فصلنا دالّتنا على جزأين، نريد أن نُوسِّع العناصر في button-static لتجنّب التّكرار. يمكن إنجاز ذلك باستخدام مُحدّد بالنّيابة بدل الدّالة، ولكن هذا يعني نقل المُحدّدات في ورقة الأنماط، لذا سنقوم بإنشاء مُحدّد بالنّيابة في الموضع ذاته ديناميكيًّا، بحيث يُنشأ حالما يُحتاج إليه ويبقى بترتيبه الأصليّ كما نتوقّع. لفعل ذلك، سنقوم أوّلًا بإنشاء مُتغيّر في النّطاق العامّ لحفظ أسماء المُحدّدات الدّيناميكيّة:

$Placeholder-Selectors: ();

ثمّ نتحرّى وجود مفتاح يُطابق محدّدنا في button-static، وسندعو هذا المفتاح "button" في الوقت الحالي. باستخدام الدّالّة map-get، سنحصل على قيمة المفتاح المطلوب أو القيمة null إن لم يُوجد، وفي الحالة الأخية سنُعيّن قيمته إلى مُتغيّر فريد (unique ID) باستخدام map-merge. سنستخدم الوسم ‎!global كوننا نريد كتابة قيمة متغيّر عُرِّف في النّطاق العامّ:

$Placeholder-Selectors: ();
// ...
@mixin button-static {
    $button-selector: map-get($Placeholder-Selectors, 'button');

    @if $button-selector == null {
        $button-selector: unique-id();
        $Placeholder-Selectors: map-merge($Placeholder-Selectors, ('button': $button-selector)) !global;
    }

    border: 1px solid;
    border-radius: 5px;
    padding: .25em .5em;

    &:hover {
        cursor: pointer;
    }
}

بعد معرفة وجود مُعرّف لمُحدّدنا، نُريد إنشاء هذا المُحدّد، ونفعل هذا باستخدام الكلمة ‎@at-root وصياغة تعويض القيم في النّصوص (‎#{}‎) لإنشاء مُحدّد بالنّيابة في جذر ورقة الأنماط اسمه هو المُعرِّف الفريد الّذي حصلنا عليه. محتويات هذا المُحدِّد ستكون استدعاء للدّالة الثّابتة (لاحظ الاستدعاءات المتداخلة! يا للرّوعة!). ثمّ نُوسّع هذا المُحدّد بالنّيابة ذاته، ممّا يُفعّله ويؤديّ لكتابة خواصّه إلى CSS.

باستخدام مُحدّد بالنّيابة في هذه الحالة بدل توسعة مُحدّد تقليديّ كصنف (class)، فإنّ محتويات المُحدّد ستُضاف إلى CSS النّهائي فقط إن وُسِّع المُحدِّد، ممّا يسمح بتقليص حجم الملفّ. وباستخدام التّوسعة بدل كتابة الخصائص مباشرةً، نكون قد تجنّبنا تكرار الخصائص في الوقت ذاته. في النّهاية سيمنع هذا هشاشة النّاتج النّهائي من CSS، لأنّه في كلّ مرّة تُستدعى هذه الدّالة، فستكون الخصائص المُشتركة ضمنها مُشاركة بالفعل ضمن ناتج CSS، وليس فقط مرتبطة مع بعضها في مرحلة المُعالجة المسبقة لـCSS فحسب.

$Placeholder-Selectors: ();
// ...
@mixin button-static {
    $button-selector: map-get($Placeholder-Selectors, 'button');
    @if $button-selector == null {
        $button-selector: unique-id();
        $Placeholder-Selectors: map-merge($Placeholder-Selectors, ('button': $button-selector)) !global;

        @at-root %#{$button-selector} {
            @include button-static;
        }
    }
    @extend %#{$button-selector};   


    border: 1px solid;
    border-radius: 5px;
    padding: .25em .5em;

    &:hover {
        cursor: pointer;
    }
}

لكن مهلًا، فلم ننتهِ بعدُ. ستبقى هناك محتويات مُكرّرة في النّاتج النّهائي، وهذا شيء لا نريده (حيث سنخصل على مُحدّد يوسّع نفسه، وهذا لا نريده أيضًا). لتجنّب هذا، سُنضيف مُعاملًا إلى button-static يُحدّد إن كان يجب المُضيّ بعمليّة التّوسعة أم لا. سُنضيفه هذا إلى دالّتنا الدّيناميكيّة أيضًا، ونمرّره إلى دالّتنا الثّابتة، وفي النّهاية ستكون لدينا الدّوالّ التّالية:

$Placeholder-Selectors: ();

@mixin button($color, $extend: true) {
    @include button-static($extend);

    background-color: $color;
    border-color: mix(black, $color, 25%);

    &:hover {
        background-color: mix(black, $color, 15%);
        border-color: mix(black, $color, 40%);
    }
}

@mixin button-static($extend: true) {
    $button-selector: map-get($Placeholder-Selectors, 'button');

    @if $extend == true {
        @if $button-selector == null {
            $button-selector: unique-id();
            $Placeholder-Selectors: map-merge($Placeholder-Selectors, ('button': $button-selector)) !global;

            @at-root %#{$button-selector} {
                @include button-static(false);
            }
        }
        @extend %#{$button-selector};
        }
        @else {
        border: 1px solid;
        border-radius: 5px;
        padding: .25em .5em;

        &:hover {
            cursor: pointer;
        }
    }
}

بعد كلّ هذا العناء، أنشأنا لأنفسنا طريقة لتسهيل صيانة أنماط Sass وتوفير مُحدِّد مُفرد في HTML، وإبقاء حجم CSS في أدنى الحدود. فهمها بلغ عدد استدعاءات دالّة button في شيفرتنا، لن تُكرَّر الخصائص الثّابتة فيها.

عند استدعاء دالّتنا لأوّل مرّة، سُتنشأ الأنماط الّتي فيها ضمن CSS في الموضع الّذي استدعيت فيه، ممّا يُحافظ على تراكب الأنماط بالتّرتيب المُتوقّع، ويقلّل هشاشة البنية. وبما أنّنا نسمح بعدّة استدعاءات للدّالّة نفسها، فبإمكاننا إنشاء "نكهات" مُختلفة بسهولة وصيانتها في كلا Sass وHTML.

في هذه المرحلة سيكون لدينا مصدر Sass وناتج CSS كما يلي:

.button-badass {
    @include button(#b4d455);
}

.button-coffee {
    @include button(#c0ffee);
}

.button-decaff {
    @include button(#decaff);
}

.button-badass {
    background-color: #b4d455;
    border-color: #879f3f;
}
.button-badass, 
.button-coffee, 
.button-decaff {
    border: 1px solid;
    border-radius: 5px;
    padding: .25em .5em;
}
.button-badass:hover, 
.button-coffee:hover, 
.button-decaff:hover {
    cursor: pointer;
}
.button-badass:hover {
    background-color: #99b448;
    border-color: #6c7f33;
}

.button-coffee {
    background-color: #c0ffee;
    border-color: #90bfb2;
}
.button-coffee:hover {
    background-color: #a3d8ca;
    border-color: #73998e;
}

.button-decaff {
    background-color: #decaff;
    border-color: #a697bf;
}
.button-decaff:hover {
    background-color: #bcabd8;
    border-color: #857999;
}

لاحظ كيف يُفصل بين الخصائص الثّابتة بفواصل في موضع تعريفها، ممّا يجعل تتبّع الأخطاء أسهل، ويحافظ على ترتيب النّصّ المصدريّ، ويقلّل حجم ملف CSS، وبحيث لا تُنشأ مُحدّدات جديدة إلّا للخصائص الّتي تتغيّر. أليس هذا رائعًا؟

المتابعة

الحقيقة أنّ كتابة النّمط نفسه لكلّ دالّة لا يتوافق مع مبدأ DRY على الإطلاق؛ بل على العكس تمامًا فهو WET (اختصارًا لـWrite Everything Twice، هل لاحظت ظرافة المبرمجين؟!). لا نريد هذا، بل يجب أن نُفكّر في كتابة دالّة لتوليد المُحدّدات بالنّيابة، يمكننا استدعاءها بدل ذلك. أو في حال استخدام إضافة Toolkit لـSass (إما من خلال Bower أو كإضافة لـCompass)، فيمكن في هذه الحالة استخدام الدّالة dynamic-extend لإيجاد وإنشاء وتوسعة مُحدّد ديناميكيّ بالنّيابة. كلّ ما عليك فعله إرسال سلسلة نصيّة للبحث عنها (مثل "button"):

@import "toolkit";

@mixin button($color, $extend: true) {
    @include button-static($extend);

    background-color: $color;
    border-color: mix(black, $color, 25%);

    &:hover {
        background-color: mix(black, $color, 15%);
        border-color: mix(black, $color, 40%);
    }
}

@mixin button-static($extend: true) {
    $button-selector: map-get($Placeholder-Selectors, 'button');

    @if $extend == true {
        @include dynamic-extend('button') {
            @include button-static(false);
        }
    }
    @else {
        border: 1px solid;
        border-radius: 5px;
        padding: .25em .5em;

        &:hover {
            cursor: pointer;
        }
    }
}

وهكذا يمكن القضاء على أي تكرار في دالّتنا، مما يقلّل حجم ملفّات Sass الأصلية وملفّات CSS النّهائيّة معًا، ممّا يدفعنا خطوة على طريق إعادة استخدام مكوّناتنا في مشاريع أخرى.

ترجمة (بشيء من التصرف) للمقال ‎DRY-ing out Your Sass Mixins‎ لصاحبه Sam Richard.

تُعتبر بساطة CSS إحدى أهم الخواص المُميزة والمرغوبة فيه، حيث أن أوراق أنماط CSS ما هي سوى قوائم طويلة من الأوامر والتي تُحدد كل واحدة منها مُنتقيا selector وبعضا من الأنماط التي يجب تطبيقها عليه. لكن وبحكم أن مواقعنا وتطبيقاتنا أصبحت تكبر أكثر فأكثر وزادت درجة تعقيدها مع ذلك، كما أنها أصبحت تستهدف أجهزة وأحجام شاشات مُختلفة، فإن البساطة التي تُميز CSS سرعان ما تُصبح ثقلا على كاهل المُبرمجين بحكم أن الأمر لم يعد مُتعلقا فقط ببعض الخواص القاعدية.

في حين أن البعض قد اقترح حلولا لمشاكل CSS عبر إضافة المُتغيرات والثوابت إليها مثلا إلا أن المُتصفحات امتنعت عن استخدامها ودعمها. وحتى ولو قام أي من المُتصفحات بدعم نسخة جديدة أكثر تطورا من CSS، فإن الأمر سيحتاج إلى سنوات ليتم تعميم الأمر على جميع المُتصفحات مما يجعل من الاعتماد عليه فكرة غير صائبة.

لكن لحسن الحظ اقترح منذ بضعة سنين المُطوران Hampton Catlin وNathan Weizenbaum طريقة أفضل للتعامل مع أوراق الأنماط المعقدة. بما أن المُتصفحات ليست مُستعدة لاعتماد إصدار جديد من CSS وجد المُطوران بأنه بإمكانهما تصميم تراكيب (syntax) جديدة لأوراق الأنماط تجعل من مهمة كتابة وصيانة تلك الأوراق أسهل، حيث يكفي استخدام مُعالج قبلي preprocessor لترجمة التركيب الجديد إلى التركيب القديم المُعتمد في أوراق CSS التي نعرفها.

تم إطلاق اسم Sass على التركيب الجديد والذي هو اختصار لـ syntactically awesome style sheets. الإصدارات الأولى من Sass كان مُختلفة جدا عن CSS الكلاسيكي، فعلى سبيل المثال لم يكن هناك وجود لأي حاضنات curly braces، كما أنه وجب تسنين indent الخواص على نحو مُعين وبعدد مُحدد من المسافات لتجنب ظهور أخطاء لدى ترجمة الملف. لم يمنع الأمر المُبرمجين الذين اعتادوا على تعلم لغات برمجة جديدة والاستمتاع بذلك من التعامل مع هذه اللغة ولم يجدوا مُشكلا مع التراكيب الجديدة التي أتت بها Sass.، لكن الأمر كان مُختلفا مع المُصممين الذين رأوا أن البنية اللغوية لـ Sass كانت مُختلفة جدا عن الـ CSS الذي ألفوه ولذلك لم يرغبوا في استخدامه. المُشكل الآخر هو أن الاختلاف في البُنية اللغوية مع CSS الكلاسيكية جعل من مهمة الاستفادة من Sass في المشاريع الحالية أمرا مستحيلا من دون إمضاء الكثير من الوقت لترجمة ملفات CSS الحالية إلى Sass.

ولدرء هذه المشاكل عمد المُطورون في الإصدار 3.0 من Sass إلى إضافة بُنية لغوية جديدة أقرب ما تكون من بنية CSS والتي أطلقوا عليها اسم SCSS أو Sassy CSS. يوصف SCSS عادة بأنه "مُجمع صارم" Strict Superset أو لغة مُترفعة مشتقة من CSS وهو الأمر الذي يعني بأن أي ملف يُعتبر صحيح البُنية في CSS سيكون صحيح البُنية في SCSS أيضا. بعبارة أخرى يُمكنك استخدام ملفات CSS الحالية مع معالج Sass القبلي من دون أية مشاكل، مما سيسمح لك بتعلم واستخدام بعض خواص Sass دون الحاجة إلى تعلم جميع الخواص لاستخدامه.

عكس ما هو الحال مع CSS العادي فإنه يُمكن اعتبار Sass/ SCSS لغة برمجية scripting language بكل ما تحمله الكلمة من معنى، حيث أنه يدعم العديد من خواص لغات البرمجة مثل: expressions،functions، variables، conditional logic، و loops. بطبيعة الحال أنت في غنى عن استعمال كل هذه الخواص دفعة واحدة، لكنها قيد إشارتك لما تكون في حاجة إليها، بل وستجعل من مهمة كتابة أوراق أنماط مُعقدة -والتي عادة ما تحتوي على شفرات مُكررة- أمرا في غاية السهولة.

سنستعرض في هذا المقال جُملة من قواعد Sass/SCSS لإعطائك فكرة واضحة عما يُمكنك القيام به باستخدام هذه اللغة الجديدة، وسنختم بجُملة من الروابط والكتب إن رغبت في الذهاب بعيدا معها.

ولإبقاء الأمر بسيطا قدر الإمكان فإننا سنركز في أغلب الأمثلة التي سنستعرضها هنا على شفرة SCSS فقط وليس شفرة CSS التي تنتج عنها بعد ترجمتها. بطبيعة الحال فإن أفضل طريقة لتعلم Sass هي أن تقوم تجربها بنفسك وتكتب بعض الشفرات ثم تلاحظ ملفات CSS التي تنتج عن ذلك. يُمكن إيجاد جميع الأمثلة المعروضة هنا إضافة إلى ملفات CSS التي تنتج عنها على هذا المُستودع على Github.

البداية

تمت كتابة Sass بلغة روبي، ويتم توزيعها عبر مدير الحزم الخاص بها والمعروف باسم RubyGems. سيكون بإمكان الذين يستعملون روبي أو الذين لا يجدون صعوبة في التعامل مع سطر الأوامر تنصيب Sass بسهولة باتباع التعليمات الموجودة على موقع Sass، أما من يجب صعوبة في ذلك أو لم يسبق له التعامل مع روبي فإنه بإمكانه الاعتماد على تطبيق Scout على نظامي Windows وmac والذي يأتي مجهزا بروبي وبـ Sass (إن كنت على نظام لينكس فإنه يفترض بك أن تكون مرتاحا مع سطر الأوامر وبالتالي... ).

سواء نصبت Sass عبر سطر الأوامر أو عبر تطبيق Scout فإن مبدأ العمل يبقى نفسه، حيث تتم مراقبة ملفات SCSS الخاصة بك وفي كل مرة يتم إدخال تحديثات عليها وحفظها تتم ترجمة ذلك إلى ملف CSS كلاسيكي. نطلق اسم مجلد المُدخلات Input Folder على المُجلد الذي يحتوي ملفات Sass ويتم حفظ ملفات CSS الناتجة في مُجلد يُطلق عليه اسم مجلد المخرجات Output Folder. يُمكن لأحد هذه المُجلدين أن يكون داخل الآخر، بل من الشائع أن يكون مجلد المُدخلات والذي يُمكن أن نسميه بـ scss داخل مجلد أوراق الأنماط الخاصة بمشروعك والذي نسميه css على النحو التالي:

my_project/
  index.html
  css/
    main_style.css
    scss/
      main_style.scss 
      _mixins.scss
      _colors.scss

في المثال السابق، يُطلق على الملفات التي تبدأ أسماؤها بمحرف _ داخل مُجلد scss وصف partials وتوصف بذلك لأنها عبارة عن أوراق أنماط جزئية يتم استيرادها في ملفات SCSS الرئيسية.

استخدم الملفات الجزئية لتنظيم شفرتك

يوفر CSS تعليمة @import لاستيراد ملفات css إضافية، وعادة ما يعمد المُطورون إلى استخدام هذه التعليمة لتقسيم المشاريع الكبيرة إلى ملفات صغيرة الحجم لتسهيل مهمة صيانتها. فعلى سبيل المثال يُمكن لملف main_style.css الرئيسي أن لا يحتوي سوى على مجموعة من تعليمات @import على النحو التالي:

@import url('/shared/global.css');
@import url('/pages/home.css');
@import url('/pages/blog.css');

بطبيعة الحال فإنه لا يُنصح بالقيام بذلك نظرا للآثار التي ستترتب عن ذلك، حيث أن كل سطر عبارة عن ملف إضافي يجب على المُتصفح تحميله مما قد يسبب ثقلا في تحميل موقعك وبالتالي تراجعا في تقييمي Yslow وgoogle Page Speed الخاصين بموقعك.

يسمح Sass بتقسيم الملفات إلى ملفات جزئية Partials بنفس الطريقة السابقة واستيرادها باستعمال نفس التعليمة @import، لكن لدى ترجمة ملفات Sass إلى CSS فإنه سيتم تضمين كامل الشفرة في ملف واحد.

@import 'shared/global';
@import 'pages/home';
@import 'pages/blog';

ينتج عن الكود السابق ملف CSS واحد فقط. يُمكن لـ Sass القيام بعملية minification لملف CSS الناتج والتخلص من كل المسافات الزائدة وذلك لتحسين أداء الموقع لدى وتقليص زمن تحميله.

هناك أمر يجب أخذه بالحسبان وهو أن الملفات الجزئية هي ملفات من نوع خاص خاصة بـ SCSS ليست مُعدة لتُستعمل كملفات CSS كلاسيكية، ويجب القيام باستيرادها باستخدام تعليمة @import لأخذها بالحسبان. كما تبدأ أسماء الملفات الجزئية بالمحرف "_”، حيث أن pages/home في المثال السابق تقوم باستيراد ملف pages/_home.scss . يسمح مُحرف _ لـ Sass بمعرفة أن الملف عبارة عن ملف جزئي وبالتالي يتجنب ترجمته إلى ملف CSS مستقل بذاته.

لا تكرر ما تقوم به

بعد أن أصبحت أوراق الأنماط خاصتنا أكثر تنظيما يتوجب علينا الآن التخلص من التكرار الموجود في محتواها.

إحدى أهم خواص Sass هي خاصية القواعد المُضمنة Nested rules. في ملفات CSS الكلاسيكية تأتي مُختلف القواعد بعضها تلو الأخرى، وعلى مُحدد كل قاعدة أن يشمل جميع عناصره:

body.home .media-unit {
  border: 1px solid #ccc;
  background-color: #fff;
}
body.home  .media-unit .right {
  border-left: 1px solid #ccc;
}
body.home .media-unit .right h1 {
  font-size: 24px;
}

علاوة على أن هذه الشفرة تحتوي على الكثير من التكرار فإنها لا تساعدنا لفهم العلاقة الموجودة ما بين العناصر التي نقوم بإضافة أنماط عرض إليها. لكن بفضل القواعد المُضمنة فإنه بإمكاننا كتابة شفرة SCSS لا تتجنب التكرار فحسب، وإنما تجعل من معرفة العلاقة ما بين العناصر أوضح وأسهل للفهم:

body.home {
  .media-unit {
    border: 1px solid #ccc;
    background-color: #fff;
    .right {
      border-left: 1px solid #ccc;
      h1 {
        font-size: 24px;
      }
    }
  }
}

بعد ترجمة هذه الشفرة فإننا سنحصل على نفس الشفرة السابقة. للأسف فإن الحجم الصغير لشفرة SCSS لا تنتج عنه بالضرورة شفرة CSS صغيرة الحجم أيضا أو سريعة التحميل، لكن استخدام القواعد المُضمنة من شأنه أن يبقي الشفرة أنظف، أكثر منطقية وأكثر تنظيما، وهي مزايا ستسهل من مهمة إدارة وصيانة هذه الشفرة مع مرور الوقت.

تسمح القواعد المُضمنة أيضا بتضمين media queries داخل قواعد أخرى، مما يجعل من السهل معرفة أي نمط يتم تنفيذه على أي من عناصر صفحتك:

.container {
  width: 940px;  // If the device is narrower than 940px, switch to 
  // a fluid layout
  @media screen and (max-width:940px) {
    width: auto;
  }
}

لدى ترجمة هذه الشفرة يقوم Sass بتحويله إلى شفرة CSS كلاسيكية وذلك عبر نسخ مُحدد .container داخل media query على النحو التالي:

.container {
  width: 940px;
}@media screen and (max-width:940px) {
  .container {
    width: auto;
  }
}

المتغيرات

متغيرات Sass مفيدة جدا لسببين: أولها وأكثرها أهمية هو تسهيل مهمة تعديل الشفرة وتجنيب التكرار، وثانيها هو تمكين المُطور من إعطاء أسماء خاصة لبعض الخواص خاصة الألوان مما يزيد من مقروئية الشفرة ويسهل فهمه.

على موقع Typekit مثلا نجد أن العديد من العناصر تستخدم اللون #99CC00 أو ما يُطلق عليه مطورو الموقع اسم Typekit green اختصارا. وبما أنه يتم استخدام هذا اللون في جميع أجزاء الموقع بدءا بالأزرار ووصولا بالعناوين الرئيسية، فإنه، وفي حالة أردنا تغيير هذا اللون الأخضر إلى لون آخر يجب علينا استبداله هذه القيمة بقيمة أخرى أينما ظهرت على ملف CSS. لكن في حال استخدام متغيرات Sass بدل القيمة الست عشرية آنفة الذكر فإنه يكفي تغيير قيمة المتغير المعني بهذا اللون (والذي يُمكن تعريفه في بداية الملف أو حتى في الملفات الجزئية) حتى يتم تغييره في جميع عناصر الصفحة بشكل آني وآلي. يُمكن أيضا استخدام المتغيرات لإعطاء قيم لمتغيرات أخرى مما يسهل من الحفاظ على أنماطك أكثر تنظيما:

$typekit-green: "#99cc00";
$typekit-link-color: $typekit-green;a {
  color: $typekit-link-color;
}

بإمكانك أيضا أن تعطي هذه المتغيرات تقريبا أي قيمة ترغب فيها، وتماما مثلما أفادتنا هذه المُتغيرات مع الألوان فإنها ستفيدنا أيضا مع الخطوط:

$sans-serif-font: 'ff-dagny-web-pro', 'Helvetica Neue', Arial,  
Helvetica, 'Liberation Sans', sans-serif;
$serif-font: 'ff-tisa-web-pro', Georgia, Times, serif;.banner h1 {
  font-family: $sans-serif-font;
}

MIXINS

Mixins عبارة عن مجموعة من القواعد أو الخواص التي يُمكنك تضمينها أو "دمجها' مع قواعد أخرى. نقوم بتعريف هذه المجموعات باستخدام التعليمة @mixin ونقوم بتضمينها في قواعد أخرى باستخدام @include.

في المثال التالي نطلب من Sass أن يقوم بتنفيذ جميع الخواص الموجودة في مجموعة خواص highlighted-bold-text على عناصر span الموجودة داخل result-with-highlights:

$highlight-color: #ffa;@mixin highlighted-bold-text {
  font-weight: bold;
  background-color: $highlight-color;
}.result-with-highlights {
  span {
    @include highlighted-bold-text;
  }
}

يكفي أن تقوم بتعريف الـ mixin مرة واحدة حتى يُصبح بإمكانك استخدامه أينما شئت في نفس الملف. في المثال التالي تتم إضافة جميع خواص الـ mixin الذي قمنا بتعريفه سابقا إلى الصنف الذي يحمل الاسم highlighted:

.highlighted {
  @include highlighted-bold-text;
}

هذا الأمر مفيد خاصة لدى القيام بإضافة خواص CSS3 على بعض العناصر مع الرغبة في ضمان ظهور هذه العناصر على نفس الشكل على جميع المُتصفحات وذلك باستخدام البادئات prefixes الخاصة بكل متصفح إضافة إلى توفير تراجع رشيق للمتصفحات التي لا تدعم تلك الخواص. عادة ما يكون التعامل مع مختلف البادئات في ملفات CSS الكلاسيكية أمرا مُزعجا نظرا لطولها وللحاجة إلى نسخها ولصقها في كل مرة. لكن مع mixins فإنه بالإمكان القيام بذلك بشكل أسرع ومن دون الوقوع في الأخطاء ومن دون الحاجة إلى كتابة الكثير من الشفرات.

في المثال التالي، نقوم بإضافة الحواف الدائرية بقيمة 4px على عنصر وذلك باستخدام بادئات كل من Webkit، Firefox وIE مع إضافة خاصية border-radius الخاصة بـ CSS3. كما أننا نقوم بتحديد قيمة الدوران في مُتغير وذلك لتسهيل مهمة تعديلها لاحقا:

@mixin rounded-corners {
  $rounded-corner-radius: 4px;
  -webkit-border-radius: $rounded-corner-radius;
  -moz-border-radius: $rounded-corner-radius;
  -ms-border-radius: $rounded-corner-radius;
  border-radius: $rounded-corner-radius;
}.button {
  @include rounded-corners;
}

يُمكن للـ mixins احتواء قواعد مُضمنة كاملة وليس مجرد خواص. المثال التالي يُوضح كيف يُمكن كتابة clearfix CSS باستخدام Sass mixin:

@mixin clearfix {
 // For modern browsers
  &:before,
  &:after {
    content:"";
    display:table;
  }  &:after {
    clear:both;
  }  // For IE 6/7 (trigger hasLayout)
  & {
    zoom:1;
  }
}.group {
  @include clearfix;
}

رمز & في Sass يرمز إلى "العنصر الحالي"، حيث أنه ولدى ترجمة الملف يتم استبداله بـ المُحدد Selector الحالي. في المثال السابق سيتم استبداله بـ .group

أوراق أنماط أكثر ذكاء

استخدام mixins لتنفيذ أنماط مُعينة على بعض العناصر أمر مفيد جدا، لكن الأفيد والأروع هو إمكانية استخدام المتغيراتarguments تماما مثلما هو عليه الحال مع لغات البرمجة المُختلفة كـ JavaScript وPHP، كما يُمكن استخدامها مع خواص أخرى أكثر تقدما مثل التعابير expressions والدوال functions وذلك بغية الذهاب أبعد من مُجرد تنظيم أوراق الأنماط وتنفيذ أنماط أكثر تعقيدا.

تُعتبر Grid Layout systems إحدى أشهر استعمالات Sass. هناك العديد من أنظمة 960px الجاهزة لكن أغلبها يتطلب إضافة أسماء أصناف غير دلالية إلى شفرتك، هذا إلى جانب حاجتك إلى تحميل كامل النظام في مشروعك قبل استخدامه حتى ولو لم تكن ترغب في استخدام سوى جزء يسير منه.

في مثالنا الأخير في هذا المقال سنقوم بإنشاء نظام Grid Layout من 12 وحدة باستخدام Sass. بدل استخدام اسم خاص لكل وحدة سنوليmixin مهمة تحديد العرض والهوامش الأنسب لكل عنصر لتحويله إلى وحدة في النظام الشبكي الذي نقوم بإعداده.

بداية نحتاج إلى تحديد عرض كل عمود وهوامشه:

$column-width: 60px;    // 12 columns = 720px
$gutter-width: 20px;    // 11 gutters =

ومن ثم نطلب من Sass أن يقوم بحساب عرض كل وحدة بالنيابة عنا، حيث أن عرض كل وحدة يساوي مجموع أعراض الأعمدة التي يغطيها إضافة إلى الهوامش التي تتخللها، وبالتالي يُمكن حسابه على النحو التالي:

width: ($column-width * $span) + ($gutter-width * ($span – 1));

وعليه فإننا سنكتب mixin يقبل متغيرا واحدا (والمتمثل في عدد الأعمدة span)، سيتم محاذاة كل وحدة إلى اليسار، وإضافة هامش 20px بين الوحدات، كما أنه ستتم إضافة هامش على يمين كل وحدة بنفس القيمة:

@mixin grid-unit($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1));
}

بالرغم من بساطة الشفرة السابقة فإنها في غاية القوة، حيث أنه بإمكاننا مثلا تنفيذ نمط قاعدي متكون من عمود يحتوي ثلثي المساحة وعمود آخر يحتوي الثلث الباقي على النحو التالي:

.container {
  @include clearfix;
  @include grid-unit(12);
  float: none;
  margin: 0 auto;
}.main-content {
  @include grid-unit(8);
}.sidebar {
  @include grid-unit(4);
  margin-right: 0;
}

وما هذا إلا جزء يسير مما يُمكن القيام به باستخدام Sass.

دعم Sass للعمليات الحسابية القاعدية يجعل من مهمة العمل على تصاميم مُتكيفة adaptive fluid-width layouts أسهل. في المثال التالي نستخدم "الوصفة" الخاصة بـ Ethan Marcotte لتحويل التصميم السابق إلى تصميم مُتكيف. بما أن Sass لا يقوم بالتحويل ما بين الوحدات ما لم يتم طلب ذلك بشكل صريح فإننا نقوم باستخدام الدالة percentage() للقيام بذلك:

.container {
// result = target / context
  width: percentage(940px / 960px);  .main-content {
    // This is nested inside of .container, so its context is 940px
    width: percentage(620px / 940px);
  }  .sidebar {
    width: percentage(300px / 940px);
  }
}

يتوفر Sass أيضا على دوال للتحكم في الألوان كالسطوع والدكانة والشفافية وما إلى ذلك على النحو التالي:

$base-link-color: #00f;
a {
  color: $base-link-color;
}
a:visited {
  // This reduces the lightness of the color (in HSL terms) 
  // by 50%, leaving hue and saturation alone
  color: darken($base-link-color, 20%);
}figcaption {
  // Generates an rgba() color value with 50% opacity
  background-color: transparentize(#fff, 50%);
}

إذا لم تكن هذه الدوال كافية في نظرك فإنه بإمكانك إضافة دوال أخرى و تشاركها وإعادة استخدامها ما بين مختلف مشاريعك عبر الملفات الجزئية. ألق نظرة على القائمة الكاملة لدوال Sass لتأخذ فكرة عما يُمكن لهذه الدوال أن تقوم به.

هل من مزيد؟

موقع Sass الرسمي يحتوي الكثير من المعلومات المهمة والمفيدة للراغب في تعلم Sass ويحتوي دليلا شاملا لكل خواص ومزايا SCSS.

أما لو كنت تفضل قراءة الكتب، فقد ترغب في قراءة كتاب Pragmatic Guide to Sass والذي شارك في تأليفه Hampton Catlin مطور Sass.

أما لو أردت الذهاب إلى أبعد من ذلك فقد ترغب في إلقاء نظرة على مكتبة Compass والتي تحتوي مجموعة كبيرة من دوال أنماط SCSS والتي تدعم كلا من ورقة التصفير CSS reset الخاصة بـ Eric Meyer، نظام الشبكات Blueprint Grid system، إضافة إلى العديد من خواص وتأثيرات CSS3، والتي يصفها مطورها بأنها “jQuery for stylesheets”.

إن كنت تستخدم تطبيق scout فإنك ستجد Compass متوفرة فيه بشكل مباشر، كما يُمكنك تنصيبه باتباع التعليمات المتوفرة على موقع المكتبة.

ترجمة -وبتصرف- للمقال Getting Started with Sass لصاحبه David Demaree