همانطور که می دانیم جاوااسکریپت، CSS و همچنین محیط اجرای آنها یعنی مرورگرها پایه های اصلی اپلیکیشن های تحت وب است و ما همواره با چند چالش بسیار مهم در رابطه با آنها روبرو هستم که میتواند منجر به عدم کارایی اپلیکیشن های ما گردد، که در این خصوص می توان به موارد زیر اشاره نمود:
جهت غلبه بر این چالش های بسیار حیاتی، ابزار کاربردی به شرح ذیل بوجود آماده است.
- کامپایلر و یا بهتر بگویم ترنسپایلر babel جهت تبدیل جاواسکرپیت های جدید به جاوااسکریپ قدیمی به منظور ایجاد قابلیت اجرا در مرورگرهای قدیمی.
- پیش پردازنده ها یا CSS Preprocessor ها مانند sass و less جهت ساختار دهی و ایجاد قابلیت های برنامه نویسی به css ها
اما با وجود دو ابزار خوب فوق جهت جاوااسکریپت ها و CSS ها مشکلات به شرح زیر همچنان در رابطه با css ها وجود دارد.
جهت مشکل عدم سازگاری قابلیت های جدید css یک راه استفاده از prefix ها به صورت مثلا زیر است
اما در هر صورت استفاده از ابزاری مانند prefix ها دستی است و وقت گیر و یا بهتر بگوییم ابزاری مشابه یکپارچه ای مانند babel جاوااسکریپت برای css ها مورد نیاز است که بسیاری از کارها را به صورت خودکار انجام دهد.
خوشبختانه ابزاری در این خصوص که این روزها بسیار فراگیر شده است postcss است که می تواند با صدها پلاگین هایی که برای آن بوجود آمده است، بسیاری از مشکلات ما را رفع نماید و یا حتی می توانیم خودمان بسته به نیاز برای آن پلاگین ایجاد نماییم.
پس به طور خلاصه postcss ابزاری است که با استفاده از جاوااسکریپت فایل های css ما را تغییر می دهد و این تغییر بسته به نیاز ما است و ما باید متناسب با نیازمان پلاگین متناسب را پیدا و یا ایجاد، و توسط ابزار postcss برروی فایل های css اعمال نماییم.
چرخه کار postcss به صورت زیر است.
همانطور که در شکل فوق می بینیم postcss یک فایل css را به یک فایل css دیگر تبدیل می کند و توجه کنید اگر پلاگینی در آن استفاده نشود فایل خروجی css کاملا برابر فایل ورودی css است و پست سی اس اس به تنهای کاری نمی کند و بوسیله پلاگین ها ترنسپایل را انجام میدهد.
شاید اینجا بگوید که این قابلیت تو sass وجود داشت اما پلاگین های postcss قابلیت های فراتری برای ما برآورده می کند که در ادامه عرض خواهیم نمود.دامه به چند نمونه خواهیم پرداخت.
یک نیاز ساده در css، تعریف متغیر ها است که این کار را می توانیم با پلاگین postcss-simple-vars انجام دهیم و به عنوان مثال فایل ورودی زیرا را
به فایل زیر تبدیل کنیم
شاید اینجا بگویید که این قابلیت تو sass وجود داشت اما پلاگین های postcss قابلیت های فراتری برای ما برآورده می کند که در ادامه عرض خواهیم دید.
یک نیاز دیگر می تواند استفاده ساده تر از media query باشد به عنوان مثلا با پلاگین
می توانیم فایل ورودی زیر را :
به فایل خروجی زیر که قابلیت اجرا در مرورگرها دارد تبدیل نماییم
و یا به سادگی prefix ها را به صورت اتوماتیک در css های خودمان با پلاگین معروف Autoprefixing اعمال نماییم و فایل زیر را
را به صورت اتوماتیک به prefix ها به صورت زیر مزین نماییم که قابلیت اجرا در تمام مرورگر ها باشد.
و یا قابلیت ها جدید css مانند
را با استفاده از پلاگین postcss-preset-env به فایل یا css زیر تبدیل نماییم
و یا حتی از خطا در css ها بوسیله پلاگین stylelint جلوگیری نماییم و به عنوان مثال خطای کنسول
app.css
2:10 Invalid hex color
در هنگام کامپایل و یا ترنسپایل زیر گرفته خواهد شد
صدها پلاگین آماده دیگر در این آدرس https://www.postcss.parts ر ا نیز می توانید جستجو و استفاده نمایید.
راه های مختلفی جهت برپایی یا setup پست سی اس اس (PostCss) مانند استفاده از Gulp، Webpack وجود دارد که جهت آن می توانید به مستندات Postcss مراجعه فرمایید.
https://github.com/postcss/postcss
