ما هي SASS ? وكيف أتعلمها واتعامل معها ؟
شارك هذا المقال:
عالم التصميم وبالأخص عالم تصميم الويب هو من أشد العوالم تنافسية وقسوة , لنعترف بذلك قبل أن نبدأ في المقال...
لا أعتقد أن هناك من يشاركني رأيي الخاص بأن الدخول في مهنة جديدة هي بمثابة السفر الى الحدود السوفيتية - الألمانية في ذروة الحرب العالمية الثانية , لكن من وجهة نظري الشخصية أرى أن دخولك الى مهنة جديدة أو حتى هواية جديدة هي بمثابة حرب بينك وبين نفسك أو بينك وبين المنافسين , والطريقة الوحيدة للفوز بهذه المعركة هي امتلاكك للأسلحة الحديثة والمتطورة, ومن جهة برمجية فان كل تقنية أو لغة برمجية جديدة تتعلمها ضمن مجالك هي سلاح تستخدمه في هذه المعركة , وأقدم لك مدخل للحصول على سلاح جديد , على ما يبدو أنه قنبلة CSS الذرية .
## ماهي SASS ؟

**[SASS](https://wiki.hsoub.com/Sass) (Syntactically Awesome Style Sheets)** هي عبارة عن محرك أو معالج CSS , يقوم فعلياً باضافة خواص برمجية الى [لغة الهيكلة CSS](https://wiki.hsoub.com/CSS) ومعروف عن لغات الهيكلة افتقارها للخواص البرمجية , باستخدامك ل SASS سيمكنك القيام بالعمليات البرمجية ضمن ملف CSS العادي , أو تقريباً ضمنه , تضيف SASS الى أكوادك امكانيات هائلة كالمتغيرات و الجمل الشرطية وأترك لك مهمة تخيل ما يمكنك تحقيقه وانجازه بهذه الميزات , أو حتى كمية الوقت الذي ستوفره باستخدامك ل SASS
SASS ليست لغة برمجية , قد يبدو الأمر كذلك عند التعامل معها لكنها في الواقع هي عبارة عن محرك مبني بلغة Ruby , لا يتطلب سيرفر للعمل لكن تشغيله على جهازك سيحتاج منك بعض الأدوات سنقدمها لك خلال هذه المقالة , وقد يبدو الأمر صعباً للوهلة الأولى , لكن بعد امضائك وقت بسيط في التعامل مع SASS ستقع في حبها بشكل سريع وستجد أن التطور الذي تقدمه هذه التقنية الى حياتك المهنية لا يوصف ! لنأخذ السرعة في التصميم على سبيل المثال , هل تعلم أن التصميم باستخدام SASS اسرع بنسبة 40% تقريباً من التصميم بأسلوب CSS التقليدي ؟
يقدم [Brad Hussy](https://www.youtube.com/channel/UCVguiojKA6iobcySMJ5boNA "https://www.youtube.com/channel/UCVguiojKA6iobcySMJ5boNA") فيديو بسيط يقارن فيه الفرق بين التصميم بالطريقتين , سترى في نهاية الفيديو أن الصفحة نفسها يتم تصميمها ب 12 دقيقة باستخدام CSS اما SASS فيمكنك انهائها ب 8 دقائق فقط ! قد لا يبدو أمر ال 4 دقائق مهماً للغاية لكن لو قارنا بين الطريقتين بمشروع كامل ستجد ان SASS ستوفر لك ساعات من العمل يمكنك استغلالها بطرق أخرى ...
## لم علي استخدام SASS في مشاريعي ؟
كما شاهدتم في الفيديو السابق , تتميز SASS بالسرعة والسهولة , وربما الأمر الأهم هو المرونة والتنظيم الذي ستجلبه معها لمشروعك , ما يميز SASS هو مميزاتها البرمجية العالية , لنأخذ مثالاً خاصية الأقسام , تمكنك هذه الخاصية الرائعة من تنظيم تصميمات مشروعك ضمن أقسام مميزة واستدعائها جميعها ضمن ملف SASS واحد ومن ثم تحويلها الى CSS , بهذه الطريقة لن تضطر للبحث ضمن صفحة هائلة تحتوي جميع أكوادك عن السطر الذي يجعل لون النصوص أخضر , فهنا لدينا ميزة السرعة وأيضاً ميزة التنظيم , وكما ذكرنا في مقال سابق عن [أهم الخطوات لتصبح مبرمج أفضل](../../blog/8-ways-become-a-better-coder/21 "https://naqrah.net/blog/8-ways-become-a-better-coder/21") فان الرغبة في التطور هي حاجة انسانية غريزية , SASS تعتبر المرحلة المتقدمة من CSS . لنوضح الأمر أكثر عبر ذكر الفوائد كنقاط منفصلة ...
**1- السرعة في انجاز المهام**
**2- التنظيم و سهولة التعديل**
**3- المرحلة المتقدمة من CSS**
## ما الذي أحتاجه للبدء ؟
تكمن فكرة SASS في المعالجة , صفحات HTML الأساسية لا تستطيع تضمين ملفات SASS و لا تستطيع متصفحات الويب القديمة أو حتى الحديثة معالجة SASS , لذا عليك أن تقوم بمعالجتها قبل النشر ولفعل ذلك ستحتاج الى التالي
**1- روبي** يمكنك تنصيب روبي من الموقع الرسمي كأي برنامج عادي , نحتاج الى روبي لكون معالج SASS مبني عليها
**2- SASS** طبعاً عليك تنصيب SASS على جهازك , يتم ذلك بسهولة عبر سطر الأوامر بكتابة الكود التالي , لكن عليك التأكد انه روبي تم تنصيبه بشكل صحيح والا سيواجهك خطاً
```
gem install sass
```
**3- محرر أكواد** يمكنك استخدام أي محرر أكواد يناسبك , ليس مهماً كالعادة
**4- خيالك** ابدأ الان تخيل تصميمك الجديد , لقد تم تنصيب SASS بنجاح على جهازك ...
## ما هي الخطوة التالية ؟

بعد أن تم تثبيت SASS على جهازك يمكنك الآن الشروع في العمل بشكل طبيبعي , ولكتابة أول ملف SASS يمكنك البدء بالخطوات التالية
**1- انشاء ملف style.sass وكتابة الكود التالي فيه**
```
body
background : red
```
**2- معالجة الكود وتحويله ل CSS**
توجه الى سطر الأوامر , واذهب الى المجلد الموجود فيه ملف style.sass عن طريق عبارة cd ثم اكتب الكود التالي
```
sass --watch style.sass:style.css
```
الآن مع كل مرة تقوم فيها بحفظ الملف أو تحديثه , سيتم معالجة ملف style.sass واضافة النتيجة الى ملف style.css الموجود في نفس المجلد , وفي حال عدم وجوده سيتم انشائه تلقائياً
**3- لا تحب سطر الأوامر ؟ اليك الحل**
يمكنك استخدام برامج بواجهات بصرية لمعالجة SASS لكن لا تتوقع مني أن أدعم هذه الفكرة , النتيجة واحدة تماماً , لكن أجد ان سطر الأوامر أسرع وأسهل , أما عن البرامج المفيدة في هذه المهمة فيوجد [CodeKit](https://codekitapp.com/ "https://codekitapp.com/") , [Koala](http://koala-app.com "http://koala-app.com")
## ما الفرق بين SASS , LESS , SCSS ؟
**SASS - SCSS**
لا يوجد فرق ! كلاهما نفس اللغة ونفس المحرك الفرق الوحيد يمكن في طريقة الكتابة , ف SCSS التي ترمز الى Sassy CSS يوجد بها أقواس وسيميكولن , ربما لتكون مقاربة أكثر لطريقة كتابة CSS الأصلية , أما SASS فلا يوجد بها ذلك
**LESS - SASS**
كل واحد فيهما محرك منفصل عن الآخر , لا تستحوذ LESS على نسبة كبيرة من المستخدمين مقارنة ب SASS
## اذاً , كيف أتعلم SASS ؟

هل ترى هذا الشاب هنا ؟ من وجهة نظري هو مدخلك الأفضل لعالم SASS , صديقنا في الأعلى هو Brad Hussy مصمم ومبرمج ويب على ما يبدو , ولديه دورات تعليمية متنوعة في مجالات الويب ويتمتع بطريقة القاء ممتعة وبسيطة , لذا ننصحك البدء في التعلم من عنده , اضافة الى Brad , اليك قائمة ببعض المصادر المساعدة في التعلم
[Brad Hussy](https://www.youtube.com/watch?v=aFWhf2wjJYo&list=PLUoqTnNH-2XxOt7UsKlTqbfrA2ucGosCR "https://www.youtube.com/watch?v=aFWhf2wjJYo&list=PLUoqTnNH-2XxOt7UsKlTqbfrA2ucGosCR")
[CodeAcademy](https://www.codecademy.com/learn/learn-sass "https://www.codecademy.com/learn/learn-sass")
[SASS Officail Guid](https://sass-lang.com/guide "https://sass-lang.com/guide")
[Elzero Web School](https://www.youtube.com/watch?v=gDTkkMdT6r0&list=PLDoPjvoNmBAz6bF7qObm2a1mLN_WHAWQo "https://www.youtube.com/watch?v=gDTkkMdT6r0&list=PLDoPjvoNmBAz6bF7qObm2a1mLN_WHAWQo")
[The Net Ninja](https://www.youtube.com/watch?v=St5B7hnMLjg&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA "https://www.youtube.com/watch?v=St5B7hnMLjg&list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA")
كيف تقييم نوعية المحتوى في نقرة؟