تحدث عن ساس

ملاحظة ، 04/04/2021: لقد قمت بتحرير هذه المقالة لإزالة بعض المراجع التي ، كما أشار أحد القراء بشكل صحيح ، لا تتطابق تمامًا مع ما كنت أحاول قوله. (في أحد هذه الأيام سأتعلم عدم كتابة هذه الأغاني في وقت متأخر من ليلة الجمعة عندما أشعر بالتعب حقًا.)

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

على سبيل المثال ، كتبت مؤخرًا واستخدمت على نطاق واسع ليس فقط Tailwind CSS ، ولكن أيضًا مترجمها التجريبي الجديد Just-In-Time (JIT). بالتأكيد ، فإن جاذبية Tailwind لمطوري الويب ، خاصة أولئك الذين لا يحبون التعامل مع CSS بشكل خاص ، قوية ومتنامية.

ومع ذلك ، هناك الكثير مما يمكن قوله عن أساليب التصميم المجربة والصحيحة التي كانت موجودة منذ سنوات ، قبل وقت طويل من وجود Tailwind وأمثلة أخرى لـ New Shiny CSS. واليوم ، أنا هنا لأقوم ببعض من هذا "القول" دعماً لأحدهم: وهو المعالج Sass CSS المسبق.

وُلدت

Sass - "أوراق الأنماط المذهلة نحويًا" - في عام 2006 ، ومنذ البداية تقريبًا ، كان أحد شعاراتها الرئيسية هو "جعل CSS ممتعًا مرة أخرى". على الرغم من أنني قد أختلف أحيانًا مع هذا الرأي ، إلا أنني أتفق تمامًا مع عنوان موقع Sass على الويب منذ عام 2013: "CSS مع قوى خارقة".

واسمحوا لي أن أتوقف هنا لأولئك الذين يتذمرون بالفعل: "نعم ، ولكن في الوقت الحاضر يمكنك فعل الكثير باستخدام CSS البسيط والأساسي أكثر مما كنت تستطيع عندما كان Sass جديدًا وساخنًا ، فمن يحتاج اليوم؟" جوابي البسيط هو: يمكنك ، إذا كنت تدعم مواقع الويب المخصصة للاستخدام في الأعمال التجارية أو الحكومة.

هذا لأن هذه الأماكن عادة ما يكون فيها Internet Explorer 11 الفظيع لا يزال نشطًا وبصحة جيدة (لن أضيع الوقت في القلق بشأن إصدار IE قبل ذلك) ، غالبًا بسبب الحاجة إلى دعم التطبيقات القديمة أو الملفات التي تتطلب ذلك . IE 11 غير متوافق تمامًا مع واحدة من أروع ميزات CSS الحديثة ، خصائص CSS المخصصة ("متغيرات CSS"). كما سأوضح باختصار ، فإن استخدام المتغيرات في CSS يمكن أن يكون هائلاً في توفير الوقت والجهد لأعمال تطوير الويب ، خاصة مع نمو مشروعاتك. لكن Sass يتيح لك استخدام المتغيرات - بطريقتها الخاصة ، لكي نكون منصفين - مع الاستمرار في إنشاء CSS التي يمكن حتى لـ IE 11 قراءتها.

ومع ذلك ، حتى لو لا تقلق بشأن مستخدمي IE 11 ، لا يزال Sass خيارًا جذابًا بشكل لا يصدق لعمل CSS الخاص بك.

إذا لم تكن معتادًا على Sass ، فإن اقتراحه بسيط: يمكنك إنشاء إرشادات التصميم في ملف Sass ، عادةً كملف .scss ، ويقوم Sass تلقائيًا بترجمته إلى CSS عادي يمكن للمتصفح التعامل معه. أحد الأشياء الأساسية التي يجب تذكرها هو أن جميع أكواد CSS الصالحة تعمل في ملف .scss. لذا يمكنك البدء بالأساسيات ، وكلما تعلمت المزيد حول ما يجعله Sass ممكنًا ، أضف مزايا Sass.

ما هي الهدايا التي تسأل؟ حسنًا ، جربهم.

تعد متغيرات CSS رائعة لأنه من الممل استخدام نفس السمات مرارًا وتكرارًا ؛ ولكن ، إذا كانت المتصفحات القديمة لا يمكنها التعامل مع متغيرات CSS الحديثة ، فأنت محظوظ ، أليس كذلك؟ سيئ. فقط استخدم متغيرات Sass. تذكر أن كل ما يراه المتصفح هو قيم المتغيرات وليس المتغيرات نفسها.

تتضمن حالة الاستخدام النموذجية الألوان ونقاط التوقف التي تحتاج إلى الحفاظ عليها مباشرة على الموقع ، خاصةً إذا كان العديد من الأشخاص سيتعاملون مع رمز التصميم ( بمعنى ، يجد البعض أنه من الأسهل تذكر متغير الاسم ، أو على الأقل تحديده للآخرين ، من قيمة سداسية عشرية أو قيمة حجم بكسل): $ ourClr: hsl (336، 58٪، 57٪) ؛ lkClr $: hsl (5، 78٪، 41٪) ؛ mdBkpt $: 768 بكسل ؛ شاشةmedia و (min-width: $ mdBkpt) { الجسم { الحشو: 01.5em ؛ } } .logoType { اللون: $ ourClr؛ وزن الخط: 625؛ } أ ، أ: التركيز ، أ: تمت زيارته { اللون: $ lkClr ؛ زخرفة النص: لا شيء ؛ الحد السفلي: 1px solid $ lkClr؛ }

بينما تسمح لك PostCSS بتداخل المحددات داخل المحددات الرئيسية ، تختلف الطرق اعتمادًا على المكون الإضافي المتداخل الذي تستخدمه. بالإضافة إلى ذلك ، يمكن أن تؤدي التغييرات العرضية في PostCSS وعالم المكونات الإضافية إلى حالات عدم التوافق بين المكونات الإضافية التي تسبب مشاكل ...