ما هي 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")