شروع کار با جکیل! تقریبا تمام توسعه دهنده های فرانت اند که زمان زیادی رو صرف کار کردن با css می کنن یک سری از کمبود ها رو حس کردن که با اومدن Preprocessor تا حد قابل توجهی برطرف شدن. همه ما تقریبا با Preprocessor هایی مثل sass، less و stylus آشنایی داریم یا حداقل اسمشون به گوشمون خورده، این ابزار ها در طراحی و توسعه وب به یک بخش حیاتی تبدیل شده اند به حدی که استفاده نکردن از این ابزار ها یک اشتباه بزرگ محسوب میشه. خوشبختانه این ابزار ها روز به روز در حال افزایش هستند یکی از این ابزار های PostCSS هست که در ادامه معرفیش خواهم کرد.

PostCSS چیست؟

اول از همه به این نکته توجه کنید که این ابزار یک Preprocessor نیست. PostCSS دستورات css را با استفاده از جاوا اسکریپت تبدیل می کنه. PostCSS کاملا وابسته به پلاگین هایی است که با جاوا اسکریپت براش نوشته شدن و به تنهایی کاری انجام نمیده برای همین میشه گفت امکانات بیشتری نسبت به Preprocessor ها در اختیار ما میزاره البته این نکته هم فراموش نشه که شما می تونید PostCSS را به همراه Preprocessor ها استفاده کنید.
برای مثال در یک پروژه نیاز دارید توی css متغییر بنویسید ، برای این کار یک پلاگین به اسم postcss-simple-vars وجود داره که این امکان رو به css اضافه می کنه.

1
2
3
4
5
6
7
8
9
10
11
12
$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
    background: $blue;
    width: $column;
}
.menu {
    width: calc(4 * $column);
    margin-$(dir): 10px;
}

خروجی کد بالا:

1
2
3
4
5
6
7
8
.menu_link {
    background: #056ef0;
    width: 200px;
}
.menu {
    width: calc(4 * 200px);
    margin-top: 10px;
}

در حال حاضر بیش از ۲۰۰ پلاگین برای PostCSS وجود داره که لیست اون هارو می تونید از صفحه Github یا سایت postcss.parts ببینید.

چرا باید از PostCSS استفاده کنیم؟

شاید پیش خودتون بگید چه دلیلی داره که به جای Preprocessor ها از PostCSS استفاده کنیم. باید بگم که دلایل خوبی برای استفاده از این ابزار وجود داره که می تونید در زیر مشاهده کنید.

  • ۱ - سریع: کامپایل سریعتر نسبت به Preprocessor ها.
  • ۲ - ماژولار: شما بر اساس نیاز پروژه می تونید پلاگین های مختلفی اضافه کنید.
  • ۳ - قدرتمند: وجود بیش از ۲۰۰ پلاگین که این ابزار رو قدرتمند و کاربردی تر می کنه.
PostCSS 5.0.11: 40 ms
PostCSS 5.0.10: 60ms    (1.5 times slower)
Rework:         75 ms   (1.9 times slower)
libsass:        76 ms   (1.9 times slower)
Less:           147 ms  (3.7 times slower)
Stylus:         166 ms  (4.1 times slower)
Stylecow:       258 ms  (6.4 times slower)
Ruby Sass:      1042 ms (26.0 times slower)

در باکس بالا می تونید سرعت کامپایل ابزار های مختلف رو ببینید. یکی از مشکلاتی که با sass داشتم تاخیر در کامپایل فایل بود که با بزرگ شدن پروژه بوجود میومد. خوشبختانه PostCSS این مشکل رو حل کرده.

نصب و راه اندازی PostCSS

PostCSS را از طریق npm نصب می کنیم.

  npm install -g postcss-cli

برای اطمینان از صحت نصب کد زیر را در ترمینال وارد کنید:

  postcss --help

پس از اجرای کد بالا باید خروجی زیر رو ببینید:

شروع کار با جکیل!

خب تا اینجای کار PostCSS رو با موفقیت نصب کردیم. در پست بعدی به معرفی پلاگین های محبوب و کاربردی PostCSS و نحوه اجرای این ابزار توسط Task Runner های Gulp و Grunt می پردازم.