تعرف على لغة Sass

نوضح في مقال اليوم ما هي لغة 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 التي كتبتها