احتضان Sass: لماذا يجب عليك التوقف عن استخدام Vanilla CSS

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

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

لماذا تستخدم Sass على أي حال؟

المنظمة:import

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

هذا هو السبب الأول وراء احتياجك إلى Sass: فهو يساعدك على تنظيم أوراق الأنماط الخاصة بك وجعلها نموذجية. إنها ليست متغيرات ، وليست متداخلة. بالنسبة لي ، فإن الميزة الرئيسية لـ Sass هي الأجزاء وكيف أنها توسع قاعدة استيراد CSS للسماح لها باستيراد ملفات SCSS و Sass. من الناحية العملية ، هذا يعني أنك ستكون قادرًا على تقسيم ملف style.css الضخم إلى عدة ملفات أصغر يسهل صيانتها وفهمها وتنظيمها.

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

المعالج المسبق هو برنامج يقوم بمعالجة بيانات الإدخال الخاصة به لإنتاج مخرجات تستخدم كمدخلات لبرنامج آخر. —ويكيبيديا

لذا ، بالعودة إلى قاعدة الاستيراد @ ، فإن هذا يعني أن استيراد @ سيتم التعامل معه بواسطة Sass وسيتم تجميع جميع ملفات CSS و SCSS الخاصة بنا في ملف واحد سينتهي به الأمر في موقعنا المباشر. سيتعين على المستخدم تقديم طلب واحد فقط وسيقوم بتنزيل ملف واحد ، بينما يمكن أن يتكون هيكل مشروعك من مئات الملفات المعيارية. هذا ما قد يبدو عليه النمط style.scs لمشروع Sass النموذجي:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

لا تكرر نفسك: المتغيرات

من المحتمل أن تبدأ أي مقالة تمدح ساس بذكر ميزة النجم - المتغيرات. الاستخدام الأكثر شيوعًا للمتغيرات هو لوحة الألوان. كم مرة وجدت عدة إعلانات لما يُفترض أن يكون نفس اللون ، وانتهى بها الأمر في CSS كظلال مختلفة قليلاً لأن لا أحد يستخدم نفس الكود السداسي؟ ساس للإنقاذ. في Sass ، يمكنك تعريف المتغيرات بأي قيمة تقريبًا. لذلك ، يمكن أن تكون لوحة الألوان الخاصة بنا شيئًا مثل:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

الكلمات التي تبدأ بـ "$" هي متغيرات Sass. ما يعنيه ذلك هو أنه لاحقًا في أوراق الأنماط الخاصة بك ، ستتمكن من استخدام هذه الكلمات ، وسيتم تعيينها للقيم التي حددتها من قبل:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

تخيل كيف يمكن لهذا أن يغير 7184 سطرًا من كود CSS ، وقد تبدأ في الرغبة في Sass الآن. والأفضل من ذلك ، تخيل أن هناك إعادة تصميم للعلامة التجارية وتحتاج إلى تحديث كل الألوان في CSS الخاص بك. مع Sass ، كل ما عليك فعله هو تحديث التصريحات عن تلك المتغيرات مرة واحدة ، وبام! ستكون التغييرات في جميع أنحاء أوراق الأنماط الخاصة بك.

قمت بترميز هذا المثال في Sassmeister ، ملعب Sass. لذا انطلق وحاول تغيير هذه المتغيرات إلى شيء آخر.

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

منظف ​​رمز المصدر: التعشيش

قد يكون التعشيش ثاني أكثر ميزة مذكورة في Sass. عندما عدت إلى Vanilla CSS بعد استخدام Sass ، بدا ملف CSS الذي كنت أنظر إليه مشوشًا لدرجة أنني لم أكن متأكدًا مما إذا كان قد تم تصغيره. بدون تداخل ، لا تبدو Vanilla CSS أفضل من ملفات .min.css المطبوعة بشكل جيد:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

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

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

تبدو جميلة وسهلة القراءة. لا تتردد في اللعب مع هذا المثال.

تكرارا! لا تكرر نفسك: الخلطات وتمتد

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

على سبيل المثال ، لنفترض أن لديك وحدة صندوقية بها زر بداخلها. تريد أن تكون حدود المربع وخلفية الزر من نفس اللون. باستخدام Vanilla CSS ، يمكنك فعل شيء مثل:

 .box { border: 2px solid red; } .box .button { background: red; }

لنفترض أنك تريد الآن نفس وحدة الصندوق ، ولكن بلون مختلف. ستضيف شيئًا مثل هذا إلى CSS الخاص بك:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

الآن ، لنفترض أنك تريد وحدة صندوقية ، ولكن بحد أرق. يمكنك أن تضيف:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

الكثير من التكرار ، أليس كذلك؟ باستخدام Sass يمكنك تجريد هذه الحالات لتقليل التكرار. يمكنك تحديد مزيج مثل هذا:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

وهكذا ، يمكن اختصار شفرة المصدر الخاصة بك إلى:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

تبدو جميلة ، أليس كذلك؟ العب مع هذا المثال. يمكنك إنشاء مكتبتك الخاصة من mixins ، أو حتى أفضل من ذلك يمكنك استخدام إحدى مكتبات المجتمع الموجودة هناك.

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

لنفترض أنك تعلن عن المربع الأول:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

أنت الآن تريد صندوقين مشابهين لهذا الصندوق ، لكن بألوان حدود مختلفة. يمكنك فعل شيء مثل:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

هكذا ستبدو CSS المترجمة:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

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

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

يمكنك بعد ذلك إعادة استخدام هذا النمط في جميع أوراق الأنماط الخاصة بك:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

سيبدو CSS المترجم كما يلي:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

تحقق من الأمثلة هنا.

هل يوجد المزيد؟

إطلاقا! لا أريد المبالغة في تعقيد هذه المقالة ، ولكن هناك عالم Sassy ينتظر أن تكتشفه ؛ وهناك أيضًا الكثير من الميزات بخلاف تلك: العمليات ، التعليقات أحادية السطر مع // ، الوظائف ، إذا كانت الحلقات ... إذا فكرت يومًا "سيكون من الرائع القيام ببعض الأشياء" X "باستخدام CSS" ، أنا متأكد هذا الشيء "X" تم تنفيذه بالفعل بواسطة Sass. "CSS مع القوى الخارقة" هو شعارها ، ولا يمكن أن يكون هذا أقرب إلى الحقيقة.

خاتمة

اذهب وقم بزيارة صفحة التثبيت وابدأ في القرصنة! صدقني ، لن تندم على ذلك.

نعم ، هناك بعض البدائل لـ Sass. المعالجات التمهيدية الأخرى (LESS ، Stylus) ، والمعالجات اللاحقة ، Grunt ، إلخ. توجد أيضًا متغيرات CSS. أنا لا أقول أن ساس هي التكنولوجيا الوحيدة المتاحة. كل ما أقوله هو أنه الأفضل! على الأقل لغاية الآن. لا تؤمن بما أقوله؟ انطلق وجربها بنفسك. لن تندم!