10 إضافات PostCSS رهيبة لتجعلك معالج CSS

PostCSS هي أداة متعددة الاستخدامات بشكل لا يصدق تجعل من الممكن تحويل أنماط CSS مع الإضافات جافا سكريبت. تكمن مرونته في الطريقة التي بني بها.

الجزء الأساسي من PostCSS هو وحدة Node.js التي يمكنك تثبيتها باستخدام npm ، ويحتوي على نظام بيئي يضم أكثر من 200 مكون إضافي يمكنك اختيار استخدامه في مشروعك.

PostCSS ليس مُعالجًا أوليًا أو مُعالج ما بعد ، نظرًا لأن الإضافات المختلفة لـ PostCSS قد تندرج ضمن أيٍّ من هذه الفئات أو كلاهما ؛ ذلك يعتمد كليا على ما تصنعه منه. مع PostCSS ، أنت لا تحتاج إلى تعلم بناء جملة مختلف كما في حالة Sass أو LESS ؛ يمكنك البدء فورا في استخدامه.

يأخذ PostCSS ملف CSS الحالي الخاص بك ويحوله إلى بيانات قابلة للقراءة في JavaScript ، ثم تقوم مكونات JavaScript الإضافية بإجراء التعديلات ، بينما يقوم PostCSS بإرجاع الإصدار المعدل من الملف الأصلي. يبدو بارد ، أليس كذلك?

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

1. الاصلاح التلقائي

Autoprefixer ربما يكون البرنامج المساعد الأكثر شهرة PostCss ، لأنه يستخدم من قبل شركات التكنولوجيا البارزة مثل Google و Twitter و Shopify. هذا يضيف بادئات البائع لقواعد CSS عند الضرورة.

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

2. CSSnext

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

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

3. PreCSS

PreCSS هي واحدة من الإضافات PstCSS التي تعمل مثل المعالج المسبق CSS. يجعل من الممكن ل استفد من علامات Sass-like في ملفات صفحات sytlesheet الخاصة بك.

من خلال إدخال PreCSS في سير العمل الخاص بك ، يمكنك استخدام المتغيرات, لو غير هذا صياغات, إلى عن على حلقات ، الخلطات, @تمديد و @استيراد قواعد ، تداخل ، والعديد من الميزات المفيدة الأخرى في كود CSS الخاص بك. توفر لك وثائق Github في PreCSS إرشادات مفصلة حول كيفية الاستفادة القصوى منها.

4. StyleLint

StyleLint هو Linter الحديث أن يقوم بالتدقيق والتحقق من صحة كود CSS الخاص بك. إنه يجعل من السهل تجنب الأخطاء ويدفعك إلى اتباع اصطلاحات الترميز المتناسقة.

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

5. أصول PostCSS

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

تحتاج إلى تحديد مسارات التحميل والمسارات النسبية والمسار الأساسي ، وسوف يبحث المكون الإضافي تلقائيًا عن الأصول التي تحتاج إليها. على سبيل المثال ، يمكنك كتابة الكود التالي إذا كنت بحاجة إلى عنوان URL الصحيح لـ foobar.jpg صورة:

 body background: determ ('foobar.jpg')؛ 

أصول PostCSS أيضا يعتني ذاكرة التخزين المؤقت للأصول, كما يمكنك ضبط cachebuster متغير إلى true إذا كنت تريد تغيير مسارات عنوان URL تلقائيًا في حالة تعديل أصل. يحسب هذا البرنامج المساعد الذكي أيضًا أبعاد (عرض وارتفاع) ملفات الصور ، أو حتى يغير حجمها باستخدام نسبة محددة مسبقًا.

6. CSSNano

إذا كنت بحاجة إلى ملفات CSS محسّنة ومصغّرة لموقع إنتاج ، فمن الجدير التحقق من ذلك CSSNano. إنه مكون إضافي معياري يتكون من العديد من إضافات PostCSS الأصغر ذات المسؤولية الفردية. إنه لا يؤدي فقط تقنيات التصغير الأساسية مثل إزالة المسافات البيضاء ، ولكن لديه أيضًا خيارات متقدمة تجعل التحسينات المركزة ممكنة.

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

7. الساحر الخط

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

كيف يعمل بسيط جدا ، تحتاج فقط إلى إضافة font-family: "My Fav Font"؛ قاعدة CSS لعنصر HTML ، ويقوم Font Magician ببقية العمل. يمكنه إضافة خطوط Google ، والنسخة المحلية من الخط ، وطباعة Bootstrap ، ويمكن أيضًا تحميل الخطوط بشكل غير متزامن. إليك موقعها التجريبي التفاعلي.

8. اكتب SVG

هل تساءلت يومًا عن مدى روعة كتابة SVG في ملفات CSS الخاصة بك؟ بمساعدة المكون الإضافي Write SVG PostCSS ، يمكنك بسهولة تحقيق هذا الهدف.

هذا البرنامج المساعد مفيد ، على سبيل المثال ، يجعل من الممكن ل قم بتخزين خلفيات وأيقونات SVG في ملف CSS, و لاحقا إضافتها إلى عنصر HTML ذي الصلة بالطريقة الآتية:

 svg square rect fill: var (- color، black)؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ . مثال background: white svg (square param (- color # 00b1ff)) cover؛ 

9. الشبكة المفقودة

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

تحتوي Lost Grid على قواعد واضحة إلى حد كبير ، على سبيل المثال ، لا يستغرق تحديد عمود بعرض 25٪ أكثر من مقتطف الشفرة الصغير هذا:

 div lost-column: 1/4؛ 

10. PostCSS العفاريت

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

يمكنك استخدام عوامل تصفية وجامعات مختلفة لتحديد الصور التي تريد وضعها في العفريت ، ويمكنك تعيين أبعاد صورة الإخراج أيضًا.