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

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 وقتها كان الموضوع اسهلى بكتير جدا , على الاقل كنت فاهم الكونسبت الاساسية. فى العموم , ان شاء الله تكونوا استفدوا , و نتقابل فى التكمله قريب بأذن الله 🙂

دمتم سالمين 🙂

More Readings,

Value Opportunity Analysis (VOA) is an approach to identifying the aspirational attributes in a product or service, listing a set of value opportunities to help design teams focus on the key items to connect the target audience. Mapping the ...

Task analysis is the analysis of how a task is accomplished, including a detailed description of both manual and mental activities, task and element durations, task frequency, task allocation, task complexity, environmental conditions, necessary clot...

A design charrette is a short, collaborative meeting during which members of a team quickly collaborate and sketch designs to explore and share a broad diversity of design ideas. Designers and non-designers—including project stakeholders, engi...

Human-centered design (HCD) is a design and management framework that develops solutions to problems by involving the human perspective in all steps of the problem-solving process. Human involvement typically takes place in observing the problem with...

It is a form of qualitative research consisting of interviews in which a group of people are asked about their perceptions, opinions, beliefs, and attitudes towards a product, service, concept, advertisement, idea, or packaging. Gauging opinions...

By now UX researchers are familiar with the importance of understanding the usage context of an interface–the physical environment where people are normally using an interface. Remote research opens the door to conducting research that also happens...