CSS Academy · درس

ما الذي يفعله PostCSS وكيف يعمل

افهم PostCSS بوصفه أداة لتحويل CSS تعمل بواسطة إضافات JavaScript.

ما الذي يفعله PostCSS وكيف يعمل درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هو PostCSS؟

إن PostCSS أداة لتحويل CSS — وليست امتدادًا للغة مثل Sass، بل معالجًا مدعومًا بـ JavaScript يحوّل CSS القياسي من خلال الإضافات. وتجعل بنية الإضافات هذه الأداة قابلة للتركيب بدرجة كبيرة.

PostCSS مقارنةً بـ Sass

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

آلية عمل PostCSS

يحلّل PostCSS ملفات CSS إلى AST (شجرة بناء الجملة المجرّدة)، ثم تحوّل الإضافات شجرة AST، ويعيد PostCSS تسلسلها إلى CSS. ويمكن للإضافات إضافة أي عقدة CSS أو حذفها أو تعديلها.

تثبيت PostCSS

يُستخدم PostCSS غالبًا من خلال Vite أو webpack أو واجهة postcss لسطر الأوامر:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

ملف إعداد PostCSS القياسي:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

PostCSS كخطوة في مسار البناء

يأتي PostCSS مضمّنًا في Vite. أضف الإعدادات إلى vite.config.js أو postcss.config.js:

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

أنواع عقد PostCSS

تتضمن شجرة AST في PostCSS أربعة أنواع رئيسية من العقد:

Root: ملف CSS بأكمله
Rule: محدّد وكتلة تصريحات
Declaration: زوج خاصية: قيمة
AtRule: قواعد @ مثل @media و@keyframes وغيرها

إضافات PostCSS الشائعة

تضم منظومة PostCSS مئات الإضافات:

autoprefixer: يضيف بادئات المورّدين
cssnano: يصغّر CSS
postcss-preset-env: يحوّل CSS الحديث إلى CSS متوافق مع المتصفحات
postcss-import: يضمّن عبارات @import
purgecss: يزيل CSS غير المستخدم

خرائط المصدر

يمكن لـ PostCSS إنشاء خرائط مصدر تربط الناتج المصغّر بملف CSS الأصلي، مما يسهّل تصحيح الأخطاء في أدوات مطوّري المتصفح.

PostCSS مقارنةً بـ CSS-in-JS

يحوّل PostCSS ملفات CSS الثابتة. أما CSS-in-JS فيُنشئ CSS ديناميكيًا في JavaScript أثناء التشغيل. وهما أداتان مختلفتان لحالتَي استخدام مختلفتين — إذ يناسب PostCSS أوراق الأنماط التقليدية أكثر، بينما يناسب CSS-in-JS الأنماط الديناميكية المقيّدة بنطاق المكوّن.

تشغيل PostCSS عبر سطر الأوامر

عالج ملفًا باستخدام واجهة سطر الأوامر:

npx postcss input.css -o output.css --use autoprefixer cssnano

تحقق سريع

ما البنية التي يستخدمها PostCSS لتمثيل CSS بغرض تحويله؟

مراجعة

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

الأسئلة الشائعة

هل درس «ما الذي يفعله PostCSS وكيف يعمل» مجاني؟

نعم — نص درس «ما الذي يفعله PostCSS وكيف يعمل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «ما الذي يفعله PostCSS وكيف يعمل»؟

افهم PostCSS بوصفه أداة لتحويل CSS تعمل بواسطة إضافات JavaScript. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «ما الذي يفعله PostCSS وكيف يعمل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy