تكويد و تطوير

ابدء SASS & Compass اليوم ! [ج١]

   -   1171

السلام عليكم ..

SASS موش ظاهره النهارده , و لا السنه اللى فاتت و لا من سنتين ! الموضوع ابعد بشويه 🙂 بس وقتها مكنش فى بلوج 😀 , المهم , فكره SASS او حتى LESS وغيرها , هى فكره شبيه جدا ببعضها , بببساطه انت بتبدء تدى ال CSS قوه و ذكاء اكبر , عن طريق انهم يوفروا متغيرات “variables” او “mixins” او حجات كتير هنتكلم عنها فى السطور الجايه.

 

الفكرة الاساسية ل SASS :

ببساطه , انت بتكتب ال css بطريقه احترافيه اكتر عن طريق sass , و وظيفه sass انها تنشئ ملف css ليك , بحيث يتم عرضه على الموقع ! يعنى تقدر تقول ان الموضوع ان sass بتشوف الكود الخاص بيك , المكتوب بطريقه الفريم ورك , و بناء عليه بتترجم لملف css اللى انت محتاجه , تقدر تخلى الملف معمول ليه minfy مثلا من الاعداد العام , تقدر تعمل include  لكلاس جوه كلاس تانى ! امكانياته كتيره جدا هنشوفها سوا 🙂

ليه SASS افضل من LESS :

الاول , الموضوع فى الاتنين متشابه , بس SASS امكانياتها و ثباتها اعلى بمراحل من LESS , من ناحية طريقه العمل نفسها , او هى بتشتغل ازاى , ف SASS بتعتمد على لغات server side , تحديدا Ruby ! اما LESS فهى بتعتمد على Javascript ! دى بتفرق فى الاداء و الثبات بشكل كبير جدا. و من ناحية الامكانيات , ف SASS اعلى بكتير فى طريقه تعاملها مع الكود يعنى كمثال بسيط , لو انا دلوقتى عامل انكلود ل Class فى ٤ عناصر مثلا , فى sass هتكون النتيجه انه جابلى العناصر كلها و اداها الخصائص دى , او بمعنى ادق , عامل الكلاس معامله ال Shared Classes , اما Less فهتكرر الكود او الخصائص , فى كل عنصر لوحده. دى لوحدها فرق موش قليل ابدا!

ايه هو Compass

compass هو فريم ورك , بيستخدم فى الاساس SASS , بيضيف ليها سهوله اكبر فى كتابه الكود و بتوفر بعض الامكانيات بطريقه افضل. و مدعومه بشكل قوى من فريمات كتير. و هى موش الحاجه الوحيده اللى بتعتمد على SASS , فى تانى زى Susy و bourbon و لو بصيت على الامكانيات اللى بتوفرها + الكود الخاص بيها , ممكن تعمل انت شئ خاص بيك مجمع مثلا !  على كل حال , خلينا نبدأ الاول ازاى تعمل install ل SASS على جهازك ..

تنصيب SASS

لان الغالبية العظمى ويندوز .. فخلينا نبدأ بيه 🙁 و ملحوظه , فى اكواد و اوامر CMD مكتوبه , خد اللى بين القوسين بس :).

تنصيب SASS على Windows :

الاول بنعمل install ل ruby , بعدين بنعمل install ل SASS , و اخيرا بنعمل Watch للفايلز اللى عاوزينها .. هنفهم اكتر فى اللى جاى :

  1. هنعمل install ل ruby من خلال البرنامج دا ruby installer ك خطوه اولى. حمل البرنامج و اعمل install.
  2. هنفتح ال CMD ! اه , لو سمحت كده من start ابحث عن CMD لو انت WIN8 او من start هتجيب Run و تكتب CMD و الانتر الجميلة بقى :).
  3. هتكتب الاول الامر دا ( ruby -v ) علشان نعرف بس هل تم ال install على خير و الجهاز مخرفش ولا لسه 🙂
  4. جابلى ان فى ruby و قالك النسخه رقم كام 🙂 , بعدها هنبدأ نعمل install ل SASS , لو مجبش النسخه رقم كام , يبقى فى مشاكل فى install ال ruby , وجرب نسخه متوافقه مع جهازك و اصدار windows عندك :).
  5. واحنا فاتحين ال CMD هنكتب الامر دا (  gem install -sass  ). اذا الامر دا مشتغلش  فهتعمل الخطوه الجايه.
  6. حال ان فيه حاجه غلط بس : هتكتب الامر دا (  chcp 1252  ) , و بعدين هنحاول فى الخطوه الخامسة مره تانيه. و هتظبط بأذن الله 🙂
  7. دلوقتى sass الحمد لله موجود , هنعمل install ل compass بالكود (   gem install compass   ) برده من خلال CMD كل شغلنا لحد دلوقتى.

على اى حال , احنا دلوقتى انهينا عمليه ال install الباقى , اننا نبدأ مشروع جديد 🙂 دى هنعرفها بس خلينا الاول نعمل install ل sass على اجهزه الحبايب مستخدمى mac :*

تنصيب SASS على MAC :

اولا , انت قصادك حلين اتنين , اما انك تستخدم برنامج , و دا هيريحك من كل الصداع , و كمثال على البرامج اللى تقدر تستخدم و اللى انا شخصيا مجربهم Codekit و Scout , الاتنين كويسين , بالنسبه ليا Scout افضل لانه مجانى + مفيش اوبشنز كتير 🙂

الحل التانى , هيبقى عن طريق terminal .. و دا كالتالى :

  1. الاول هنفتح ال terminal.
  2. انت موش محتاج تعمل install  ل ruby , المفروض انها معمول ليها install , بس اذا جربت الخطوه التانيه و مشتغلتش , فأنزل للنوت اللى تحت , بالنسبه للنقطه دى.
  3. بعد كده هنعمل install ل sass بالكود دا (  gem install sass  ) او (  sudo gem install sass  ) و هيطلب منك الباسوورد , اكتبه و اضغط return.
  4. بعد كده هنعمل install ل compass بالكود دا (  gem install compass  ) او لو فى مشكله فى الصلاحيات هيبقى (  sudo gem install compass  ) و هيطلب باسورد المستخدم , اكتبه و اضغط return.

عمل install او update ل ruby على mac os

لو انت Yosemite  او  Mavericks فانت عندك نسخه 2.0 اما لو OS X Mountain Lion, Lion, Snow Leopard فالنسخه المتوفره عندك هى ال 1.8.7 , علشان تبدأ تتعامل انت هتحتاج تعمل install ل Homebrew و الخطوات الجايه دى فيها شرح :

  1. هتعمل install ل Homebrew عن طريق terminal برده بالكود ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
  2. بعدين لو هنعمل install ل ruby هيكون بالكود دا (   brew install ruby  ).
  3. لو هنعمل update ل ruby هيكون بالكود دا (  gem update –system  ).
  4. ارجع بقى كمل باقى الطريقه الخاصه بعمل install ل sass عادى جدا :).

كده احنا خلصنا , و جهزنا الجهاز الخاص بينا علشان نشتغل عليه sass بدون اى مشكله 🙂 دلوقتى بالنسبه للناس اللى استخدمت برامج , فموش هتحتاج الخطوه الجايه او خطوه ال Watch اما اللى مستخدمش برامج , فخليك معانا , محتاج الخطوه الجايه انت 🙂

انشاء مشروع جديد ب SASS :

الخطوه دى , بس فى حاله واحده. اذا كنت موش مستخدم برامج , و كنت معتمد على ال terminal او ال cmd .. فكره الخطوه كلها , اننا بنعمل بروجيكت جديد , فولدر مثلا و تسميه اى اسم , و بعدين بنقول ل sass اننا هنخلى ملفات scss فى الفولدر الفلانى , و طلعى الاوت بوت الخاص بيه فى الفولدر الفلانى التانى ! مثلا .. فخليكم معايا كده فى الخطوات الجايه دى :

  1. اعمل فولدر فى اى حته بأسم مثلا  project. و اعمل جواه فولدرين , مثلا scss و الفولرد التانى css.
  2. افتح cmd او terminal و ادخل على مسار الفولدر الخاص بالمشروع , اللى هو project هنا “لو محتاج مساعده هتلاقى الشرح للنقطه دى تحت شويه”.
  3. هنعمل هنكتب امر صغير جدا دلوقتى فى ال terminal او ال cmd و هو (  sass –watch scss:css  ).

تعالو نفهم بس ايه اللى اتعمل فوق دا , علشان هيفيدنا كتير جدا فى حل المشاكل قدام اللى ممكن تواجهنا ..

  • الاول احنا دخلنا الفولدر اصلا , الخاص ب project من على terminal او cmd , علشان كل الاوامر تبقى مختصره , يعنى لما نحدد اسم ملف او فولدر يبقى اللى بنكتبه صغير موش كبير.
  •  تانى حاجه , احنا الامر اللى كتبناه و هو sass –watch دا معناه انى عاوز sass تراقب ملف , او بمعنى ادق , تفضل تعمل للملف دا css كل ما يتعدل , و بعد الامر حددنا الفولدرات وهى scss , دا هيبقى فيه ملفات sass و الفولدر التانى css و هو اللى فيه الاوت بتاع الفايلز فى شكل css. الموضوع موش مرتبط بأسماء الفولدرات تماما , انت بس بتضيف قمتين , القيمه الاولى , هى ال scss و القيمه التانيه هى ال css.
  • فى الامر اللى فوق دا , ينفع يبقى التحديدات موش فولدرات ! ينفع تبقى الملفات نفسها مثلا sass –watch file.scss:file.css.
  • فى اوامر تانيه زى sass-convert و دى برده بتقدر تحول من خلالها بنفس طريقه التحديد اللى موجوده فوق بين scss و sass و css.
  • ممكن برده تعمل run بس ل sass بالامر دا (  sass input.scss output.css).

الاوامر كتير جدا , و افضل حاجه انك تفهم الاول نبذه مختصره تخليك تشتغل , ودا اعتقد انه لدلوقتى حصل , و بعدين تراجع الشرح الخاص ب sass على موقعهم, على الاقل الخاص بالنقطه دى او النقاط اللى شوفناها لحد دلوقتى من موقع sass من هنا. فى حته فوق نوهت عنها , الخاصه باختيار الفولدر او الدخول عليه .. خلونا نروح نشوفها زمانها ساحت فى الحر دا 😀

تحديد الفولدر و الملفات عن طريق CMD و   Terminal :

الفكره اننا بس بنعرف الباث الخاص بالفولدر مثلا هو موجود فى D://projects/project .. ازاى بقى ندخل على المسار دا ؟

  • لو ويندوز , الموضوع سهل (  cd c:\projects\project  ). الحياة حلوه اهو.
  • لو ماك , انت اللى هتعمله انك تدوس كليك يمين على الفولدر و get info و تشوف where فى الجينيرال فوق , خد الباث دا كوبى , اكتب فى الترمينال هتكتب cd و بعده تحط الباث اللى انت لسه واخده كوبى و انتر جميله كده و خلصت الموضوع.

دلوقتى احنا جهزنا sass تماما , و قادرين نشتغل بيها , بس لسه منعرفش امكانياتها ! دا هتكلم عليه فى البوست الجاى بأذن الله , و اسف جدا بس فعلا مفيش وقت 🙁 بس من دلوقتى لحد ما ينزل البوست الجاى إن شاء الله , انت تقدر تبدأ , الاول , بلاش تدخل تتعلم sass مباشره ! هتتعقد بصراحه و بشوف ان ال docs بتاعتهم موش منظمه ! انت تقدر تتعلم sass بسهوله جدا , بعد ما تبص بصه سريعه على LESS و امكانياتها !؟

اه والله انا نفسى اتعلمت كده 🙂 اشتغلت LESS و بعدين دخلت اتعلم SASS وقتها كان الموضوع اسهلى بكتير جدا , على الاقل كنت فاهم الكونسبت الاساسية. فى العموم , ان شاء الله تكونوا استفدوا , و نتقابل فى التكمله قريب بأذن الله 🙂

دمتم سالمين 🙂

المناقشة و النشر