ما هو Stylus CSS وكيف تستخدمه؟

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

تعرف على كيفية استخدام Stylus CSS ، وسيكون لديك خيار آخر ، مع أحد معالجات CSS الأولية الأكثر شيوعًا المتاحة.

ما هو المعالج الأولي لـ CSS؟

معالجات CSS الأولية هي أدوات مساعدة تسهل كتابة CSS. غالبًا ما يقومون بتجميع التعليمات البرمجية من بناء الجملة المخصص الخاص بهم إلى ملف .css التنسيق الذي يمكن أن تفهمه المتصفحات.

تقدم معالجات CSS الأولية مثل Sass ، على سبيل المثال ، ميزات خاصة مثل الحلقات والمزج والمحددات المتداخلة وعبارات if / else. هذه الميزات تجعل من السهل الحفاظ على كود CSS الخاص بك ، خاصة في الفرق الكبيرة.

لاستخدام معالج CSS ، يجب عليك تثبيت المترجم في بيئتك المحلية و / أو خادم الإنتاج. تتيح لك بعض أدوات إنشاء الواجهة الأمامية ، مثل Vite ، تضمين ملفات معالجات CSS الأولية مثل LessCSS في مشروعك.

كيف يعمل Stylus CSS

لتثبيت Stylus في بيئتك المحلية ، تحتاج إلى Node.js وأيًا منهما مدير حزمة العقدة (NPM) أو الغزل مثبت على جهازك. قم بتشغيل الأمر الطرفي التالي:

تثبيت القلم npm

أو:

إضافة غزل القلم

ينتهي كل ملف Stylus CSS بامتداد .styl امتداد. بمجرد كتابة شفرة Stylus CSS الخاصة بك ، يمكنك تجميعها باستخدام هذا الأمر:

قلم.

هذا يجب أن يجمع كل .styl الملفات والإخراج .css الملفات الموجودة في الدليل الحالي. يتيح مترجم Stylus أيضًا إمكانية التحويل البرمجي .css الملفات في .styl مع ال --css علَم. لتحويل ملف .css ملف إلى .styl التنسيق ، استخدم هذا الأمر:

قلم - css style.css style.styl

محددات التركيب والأصل في Stylus CSS

في CSS التقليدية ، تقوم بتعريف قالب النمط بأقواس ؛ سيؤدي الفشل في تضمين هذه الشخصيات إلى أنماط معطلة. في Stylus CSS ، يعد استخدام الأقواس أمرًا اختياريًا.

يدعم Stylus بناء جملة يشبه Python ، مما يعني أنه يمكنك تحديد الكتل باستخدام المسافات البادئة بدلاً من ذلك ، مثل هذا:

.حاوية
هامِش: 10مقصف

تجمع كتلة التعليمات البرمجية أعلاه إلى CSS التالية:

.حاوية {
هامِش: 10مقصف;
}

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

زر
لون: أبيض;
 &:يحوم
لون: أصفر;

الذي يجمع إلى:

زر {
لون: #fff;
}
زر:يحوم {
لون: # ff0;
}

كيفية استخدام المتغيرات في Stylus CSS

في معالجات CSS الأولية مثل Less CSS ، يمكنك تحديد المتغيرات بامتداد @ شخصية، بينما تستخدم CSS التقليدية "-" لتعريف متغير.

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

bg- اللون = أسود

يمكنك الآن استخدام المتغير في ملف .styl ملف مثل هذا:

شعبة
لون الخلفية: bg- اللون

يتم تجميع كتل التعليمات البرمجية أعلاه إلى CSS التالية:

شعبة {
لون الخلفية: #000;
}

يمكنك تحديد متغير فارغ بأقواس. على سبيل المثال:

متغير فارغ = ()

يمكنك الرجوع إلى قيم الخصائص الأخرى باستخدام @ رمز. على سبيل المثال ، إذا كنت تريد تعيين ارتفاع div ليكون نصف عرضه ، فيمكنك القيام بما يلي:

عرض العنصر = 563مقصف
شعبة
عرض: عرض العنصر
ارتفاع: (عرض العنصر / 2)

قد ينجح ذلك ، ولكن يمكنك أيضًا تجنب إنشاء المتغير تمامًا والإشارة إلى ملف عرض قيمة الخاصية بدلاً من ذلك:

شعبة
عرض: 563مقصف
ارتفاع: (@عرض / 2)

في كتلة التعليمات البرمجية هذه ، ملف @ يسمح لك الرمز بالإشارة إلى الملف الفعلي عرض الملكية على شعبة. بغض النظر عن النهج الذي تختاره ، عند تجميع ملف .styl ، يجب أن تحصل على CSS التالي:

شعبة {
عرض: 563مقصف;
ارتفاع: 281.5 بكسل;
}

الوظائف في Stylus CSS

يمكنك إنشاء وظائف تُرجع القيم في Stylus CSS. لنفترض أنك تريد تعيين ملف محاذاة النص خاصية div إلى "مركز" إذا كان عرض أكبر من 400 بكسل ، أو "يسار" إذا كان الملف عرض أقل من 400 بكسل. يمكنك إنشاء وظيفة تتعامل مع هذا المنطق.

محاذاة المركز(ن)
لو (ن > 400)
 'مركز'
آخرلو (ن < 200)
 'غادر'
شعبة {
عرض: 563مقصف
محاذاة النص: محاذاة المركز(@عرض)
ارتفاع: (@عرض / 2)
}

تستدعي كتلة التعليمات البرمجية هذه محاذاة المركز وظيفة ، تمرير عرض قيمة العقار من خلال الرجوع إليها بامتداد @ رمز. ال محاذاة المركز تتحقق الوظيفة مما إذا كانت المعلمة الخاصة بها ، ن، أكبر من 400 ، وإرجاع "المركز" إذا كان كذلك. لو ن أقل من 200 ، تقوم الدالة بإرجاع "يسار".

عند تشغيل المترجم ، يجب أن ينتج المخرجات التالية:

شعبة {
عرض: 563مقصف;
محاذاة النص: 'مركز';
ارتفاع: 281.5 بكسل;
}

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

يوفر Stylus حلاً: المعلمات المسماة. استخدمها بدلاً من المعلمات المرتبة عند استدعاء دالة ، مثل هذا:

طرح او خصم(ب: 30 بكسل, أ: 10 بكسل)/*-20px*/

متى تستخدم معالج CSS

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

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