ان تعاملت مع لغة SCSS اخبرنا ما هوة الفرق بينها وبين CSS
هل تعاملت مع لغة 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 وقد أعجبني كثيرا
التعليقات