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

ساس موش ظاهره النهارده ، ولا السنه اللى فاتت و لا من سنتين! الموضوع: ابسط بشويه: ماهوش في بلوج 😀، المهم، فكره ساس او حتى اقل من ذلك، هل فكره شبيه جدا عنها، بببساطه انت بتبدء تدلي ال CSS قوه و ذكاء اكبر حجات كتير هنتكلم عنها فى السطور الجايه.

 

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

ببساطه، انت بتكتب ال css بطريقه احترافيه اكتر عن طريق sass، و وظيفه sass انها تضع ملف css ليك، يجري عرضه على الموقع! يعجبني أن تخبرني عن هذا الموضوع في ساس بتشوف الكود الخاص بك. امكانياته كتيره جدا هنشوفها سوا 🙂

ليه ساس افضل من اقل

الاول ، الموضوع في الاتنين متشابه ، بس ساس امكانياتها و ثباتها اعلى من المراحل ، من ناحية طريقه العمل ، او بتشتغل ازاى ، ف ساس بتعتمد على لغات الخادم ، تحديدا روبي! اما اقل فهى بتعتمد على جافا سكريبت! دى بتفرق فى الاداء و الثبات بشكل كبير جدا. و ، من ناحية الامكانيات ، ساس أعلى بكتير في طريقه تعاملها مع الكود يعينني كمثال بسيط ، لو أنا دلوقتي عامل انكلود ل Class في ٤ عناصر ، في ساس هتكون النتيجه انه جابلى العناصر الخاصة بك الفصول المشتركة ، اما اقل فهتكرر الكود او الخصائص ، في كل عنصر لوحده. دى لوحدها فرق موش قليل ابدا!

ايه هو البوصلة

البوصلة هو فريم ورك ، وبيفيد في الاساس ساس ، بضيف ليها سهوله أكبر في كتابه الكود و بتوفر بعض الامكانيات بطريقه افضل. و مدعومه بشكل قوى و هو موش الحاجه الوحيده سوزي و بربون و لو بصيت على الامكانيات اللى بتوفرها + الكود الخاص بيها على كل حال ، خلينا نبدأ الاول ازاى تعمل

تنصيب SASS

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

تنصيب SASS على ويندوز:

تثبيت بن لركوب على روبي ، بعدين بن لؤلؤة تثبيت ل ساس ، و اخيرا بنعمل مشاهدة للفايلز اللى عاوزينها ..

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

على اي حال ، احنا دلوقتى انه تركيب جهاز الباقى ، هل نحن نبدأ مشروع جديد؟

تنصيب SASS على MAC:

اولا، انت قصادك حلين اتنين، اما انك تستخدم برنامج، و هوى اياك من كل الصداع، و كمثال على البرامج التي تستخدمها و اللى انا شخصيا مجربهم Codekit و Scout، اتنين كويسين

الحل التانى، هيبقى عن طريق المحطة .. و دا كالتالى:

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

عمل تثبيت او تحديث ل ruby على mac os

الإصدار 2.0 من الإصدار 2.0 من لو أس أس ماونتن ليون ، ليون ، سنو ليوبارد فالنسه المتوفره عندك هي ال 1.8.7 ، علشان تبدأ تتعامل أنت هتحتاج تعمل تثبيت ل البيرة و الخطوات الجايه دى فيها

  1. هتعمل تثبيت ل Homebrew عن طريق محطة برده بالكود ruby -e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  2. بعدين لو هنعمل تثبيت ل روبي هيكون بالكود دا (brew install ruby).
  3. تحديث لو روبي هيكون بالكود دا (نظام تحديث الأحجار الكريمة).
  4. ارجع بقى كمل باقى الطريقه الخاصه تثبيت ل sass عادى جدا :).

كده احنا خلصنا ، و (جهزنا الجهاز الخاص بك) ساس بدون اي مشكله 🙂 دلوقتي بالنسبه للناس

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

الخطوه دى ، بس فى حاله واحده. هل أنت موش مستخدم ؟، هل أنت معتمد على محطة أو ال ..؟ الخاص بيه فى الفولدر الفلانى التانى! مثلا .. فخليكم معايا كده فى الخطوات

  1. مشروع امل فولدر فى اى حته بأسم المثال. و اعمل جواه فولدرين ، مثلا scss و الفولرد التانى css.
  2. افتح كمد أو محطة و دخول على مسار الفولدر الخاص بالمشروع ، اللى هو مشروع هنا "لو محتاج مساعده هتلاقى الشرح للنقطه دى تحت شويه".
  3. (sass –watch scss: css).

هل من الممكن أن تربحنا؟

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

الاوامر كتير جدا ، و أفضل حكاية انك تفهم الاول من موقع sass في حته فوق نوهت عليها ، الخاص بك باختيار الفولدر أو الدخول عليه .. خلونا نروح نشوفها زمانها ساحت في الحر دا 😀

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

مشروع: مشروع / مشروع .. ازاى بقى ندخل على المسار دا؟

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

دلوقتى احنا جهزنا sass تماما ، و قادرين نشتغل بيها ، بس لسه منعرفش امكانياتها! دا هتكلم عليه في البوست الجاى بأذن الله. هتتعقد بصراحه و بشوف ان ال مستندات بتاعتهم موش منظمه! انت تقدر تتعلم ساس بسهوله جدا؟

أنا والله انا نفسى اتعلمت كده؟ في العموم ، ان شاء الله تكونوا استفدوا ، و نتقابل

دمتم سالمين 🙂

المزيد من القراءات ،

التقييم الاسترشادي هو طريقة فحص قابلية الاستخدام لبرامج الكمبيوتر التي تساعد على تحديد مشاكل قابلية الاستخدام في تصميم واجهة المستخدم (UI). وهو يتضمن على وجه التحديد مقيمين يفحصون الواجهة ويحكمون على توافقها مع التوصية ...

لوحة الصور أو لوحة الصور هي نوع من منتديات الإنترنت التي تعمل في الغالب عن طريق نشر الصور. تم إنشاء لوحات الصور الأولى في اليابان وألهمت إنشاء عدد من لوحات الصور باللغة الإنجليزية. وهي تستند إلى conc text conc ...

تصف السيناريوهات القصص والسياق وراء سبب وصول مستخدم معين أو مجموعة مستخدم معينة إلى موقعك. يلاحظون الأهداف والأسئلة المراد تحقيقها ويحددون أحيانًا إمكانيات كيف يمكن للمستخدم (المستخدمين) تحقيقها على الموقع. ا ...

سلسلة من الخطوات ("التدفق") يكملها المستخدمون لمهمة محددة. إنه تدفق فردي يكمله جميع المستخدمين بشكل مشابه لإجراء محدد. السابق. سجل. تدفقات المهام لها تدفق مفرد ، فهي لا تتفرع. واحدة من دي مختلفة ...

GOMS هو نموذج للأداء البشري ويمكن استخدامه لتحسين كفاءة التفاعل بين الإنسان والحاسوب من خلال القضاء على التفاعلات غير المجدية أو غير الضرورية. GOMS هو اختصار لـ: G → الأهداف O → العوامل M → الطرق S → التحديد ...

التقاط السياق اليومي الذي يتفاعل فيه الأشخاص مع منتجك أو خدمتك - يلتقط هذا ما يفعله العملاء ويفكرون فيه ويستخدمونه كما هو مبين لتحقيق هدف ينطوي على منتجك أو خدمتك. ويوفر إطارا desig ...