هل تعاملت مع لغة SASS البديلة لـ CSS

كتبت ردا طويلا وعريضا أصف أهم المميزات، ثم بالخطأ خرجت من التبويب بالضغط على cotrol + z (تبا لعادات المحررات السيئة)

المهم، الرد مجددا باختصار

أولا لابأس في الاسم، فلهما نفس الاسم

سأحكي لك أولا قصتي القصيرة مع SASS التي بدأت استخدامها هذا الأسبوع فحسب

سمعت عن SASS و LESS منذ وقت طويل. جربت استخدام LESS سابقا ولكن عقلي لم يلتقطها بشكل جيد فتركتها

مؤخرا أنهيت العمل على أخير. وبعد العديد من التعديلات المتغيرة وحجم الملف الكبير (قرابة 2000 سطر CSS) أصبح من الصعب إصلاح وتعديل الملف

أتاني مشروع آخر فقررت أن الوقت قد حان لأجرب SASS التي قد تحدث فرقا، فحملتها وجهزت كل شيء، وتعلمتها في ذلك اليوم

وصدقني لقد أحدثت فرقا كبيرا

CSS تلتهم الوقت بشراهة، SASS أتت لتحل المشكلة. وتنهي الأمور بسرعة

سأذكر لك أهم المميزات التي وجدتها في SASS حاليا لتساعد على العمل

المتغيرات

أنشأ ملف يسمى _vars.scss يحتوي على كل المتغيرات التي سأتخدمها بتكرار. وهي الألوان، مجموعات الخطوط، حجم الخط، ارتفاع الخط. والعديد من الأمور الروتنية

وأستعملها لاحقا في المشروع، لسهولة التعديل. حدث معي أن العميل أراد تغيير الألوان، وتطلب الأمر تغييرها يدويا، مع scss كل ما علي هو تغيير اللون في ملف _vars.scss

الخلط

وهي خلف عناصر مع بعضها تملك نفس الأب

مثلا

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

تنتج

nav ul  {
      margin: 0;
      padding: 0;
      list-style: none;
    }

nav li     {
      display: inline-block;
    }

nav a     {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }

الأمر أزعجني دوما، والآن هو مساعد خصوصا في القوائم nav فul يملك أشياء وكذلك li وكذلك a

الوراثة

وهي أخذ متغيرات عنصر ما والإضافة عليها

لنقل مثلا لديك رسائل تنبيهات، كل الرسائل لها نفس التنبيهات، لذا أنت تعطي الرسالة الواحدة الستايل الذي تريده، وتورثه للبقية مع التعديل

أنصحك بزيارة هذه الصفحة لتتعلم أكثر

حاليا أنا أستخدم sass بواسطة GUI بالتحديد برنامج Koala وقد أعجبني كثيرا

عفوا

هناك خطئ في الكتابة وهي #SASS وليس SCSS