مقدمة إلى PostCSS

اكتشف PostCSS ، أداة رائعة لمساعدتك في كتابة CSS الحديثة. PostCSS هي أداة شائعة جدًا تتيح للمطورين كتابة معالجات CSS المسبقة أو معالجات لاحقة

مقدمة

PostCSS هي أداة تسمح للمطورين بكتابة معالجات CSS أو معالجات لاحقة تسمىالإضافات. هناك عدد كبير من المكونات الإضافية التي توفر الكثير من الوظائف ، وفي بعض الأحيان يعني مصطلح "PostCSS" الأداة نفسها ، بالإضافة إلى النظام البيئي للمكونات الإضافية.

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

توفر البنية القائمة على المكون الإضافي أرضية مشتركة لجميع العمليات المتعلقة بـ CSS التي تحتاجها.

ملاحظة: PostCSS على الرغم من الاسم ليس معالج CSS لاحق ، ولكن يمكن استخدامه في بنائها ، بالإضافة إلى أشياء أخرى

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

قم بتثبيت PostCSS CLI

استخدامغزل:

yarn global add postcss-cli

أوnpm:

npm install -g postcss-cli

بمجرد الانتهاء من ذلك ، فإنpostcssسيكون الأمر متاحًا في سطر الأوامر الخاص بك.

يقوم هذا الأمر على سبيل المثال بتشغيل المكون الإضافي autoprefixer على ملفات CSS الموجودة في المجلد / css ، وحفظ النتيجة في ملف main.css:

postcss --use autoprefixer -o main.css css/*.css

مزيد من المعلومات حول PostCSS CLI هنا:https://github.com/postcss/postcss-cli.

يوفر PostCSS واجهة مشتركة للعديد من الأدوات الرائعة لمعالجة CSS.

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

المصفف الآلي

المصفف الآلييوزع CSS الخاص بك ويحدد ما إذا كانت بعض القواعد تحتاج إلى بادئة البائع.

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

تحصل على كتابة CSS أنظف.

مثال:

a {
    display: flex;
}

يتم تجميعها إلى

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

cssnext

https://github.com/MoOx/postcss-cssnext

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

  • يضيف البادئات باستخدام Autoprefixer (لذلك إذا كنت تستخدم هذا ، فلا داعي لاستخدام Autoprefixer مباشرة)
  • يسمح لك باستخداممتغيرات CSS
  • يسمح لك باستخدام التعشيش ، كما هو الحال في Sass

وأكثر بكثير!

وحدات CSS

وحدات PostCSSتتيح لك استخدام وحدات CSS.

لا تعد وحدات CSS النمطية جزءًا من معيار CSS ، ولكنها عملية خطوة بناء للحصول على محددات محددة النطاق.

csslint

يساعدك Linting على كتابة CSS الصحيحة وتجنب الأخطاء أو المزالق. الأسلوبيسمح لك المكون الإضافي بفحص CSS في وقت الإنشاء.

cssnano

cssnanoيقلل CSS الخاص بك ويجعل تحسينات التعليمات البرمجية للحصول على أقل كمية من التعليمات البرمجية التي يتم تسليمها في الإنتاج.

ملحقات أخرى مفيدة

في PostCSS GitHub repo ، يوجد ملفالقائمة الكاملة للإضافات المتاحة.

بعض الأشياء التي أحبها تشمل:

كيف تختلف عن ساس؟

أو أي معالج CSS آخر؟

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

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

يمكنك كتابة المكون الإضافي PostCSS الخاص بك للقيام بأي شيء تريده.

تحميل مجانيكتيب CSS


المزيد من دروس css: