نحوه استفاده از PostCSS به عنوان یک گزینه قابل تنظیم برای Sass

توسعه دهندگان وب عاشق این وب سایت هستند پیش پردازنده CSS Sass. بر اساس نظرات ساس در وضعیت CSS نظرسنجی، هر سازنده می داند که چیست ، 89٪ از آن به طور منظم استفاده می کنند و 88٪ رضایت بالایی دارند.

بسیاری از بسته های وب شامل پردازش Sass هستند ، اما ممکن است شما از آن استفاده کنید PostCSS بدون اینکه متوجه باشم PostCSS در درجه اول به خاطر خود شناخته شده است پلاگین Autoprefixer، که به طور خودکار اضافه می شود -webkit، -moz، و -ms پیشوندهای فروشنده در صورت لزوم به خصوصیات CSS. سیستم افزونه آن به این معنی است که می تواند کارهای بیشتری انجام دهد … مانند تدوین .scss پرونده ها بدون نیاز به استفاده از کامپایلر Sass.

این آموزش توضیح می دهد که چگونه یک پیش پردازنده CSS سفارشی ایجاد کنیم که نحو Sass را کامپایل کند و آن را با ویژگی های دیگر تکمیل کند. برای هرکسی با نیازهای خاص CSS که کمی Node.js را می شناسد ایده آل است.

شروع سریع

نمونه ای از پروژه PostCSS را می توان از آن شبیه سازی کرد GitHub. به Node.js نیاز دارد ، بنابراین اجرا کنید npm install برای به دست آوردن تمام وابستگی ها.

تظاهرات را تدوین کنید src/scss/main.scss کد منبع به build/css/main.css استفاده كردن:

npm run css:dev

هر زمان که پرونده ها تغییر می کنند با استفاده از کامپایل خودکار:

npm run css:watch

سپس با فشار دادن از تماشا خارج شوید Ctrl | Cmd + ج در ترمینال

هر دو گزینه همچنین یک نقشه منبع در ایجاد می کنند build/css/main.css.map، که به فایلهای منبع اصلی در ابزارهای توسعه دهنده مراجعه می کند.

CSS کوچک شده در سطح تولید بدون نقشه منبع با استفاده از:

npm run css:build

رجوع به README.md پرونده برای اطلاعات بیشتر

آیا باید Sass را با PostCSS جایگزین کنید؟

کامپایلر Sass مشکلی ندارد ، اما عوامل زیر را در نظر بگیرید.

وابستگی های ماژول

آخرین نسخه دارت Sass را می توان با استفاده از Node.js به صورت جهانی نصب کرد npm مدیر بسته:

npm install -g sass

ساس را کامپایل کنید .scss کد با:

sass [input.scss] [output.css]

نقشه های منبع به طور خودکار تولید می شوند (--no-source-map آنها را خاموش خواهد کرد) یا --watch وقتی فایلها تغییر می کنند می توانند به کامپایل خودکار اضافه شوند.

آخرین نسخه Sass به کمتر از 5 مگابایت فضای نصب نیاز دارد.

PostCSS باید به منابع کمتری و یک کامپایلر اصلی مانند Sass با پیشوند خودکار نیاز دارد و کوچک سازی به کمتر از 1 مگابایت فضا نیاز دارد. در واقعیت ، شما node_modules پوشه به بیش از 60 مگابایت گسترش یافته و با افزودن افزونه های بیشتر به سرعت افزایش می یابد. این بیشتر است npm نصب سایر وابستگی ها. حتی اگر PostCSS از آنها استفاده نكند ، نمی توان آن را به عنوان یك گزینه سبك در نظر گرفت.

با این حال ، اگر قبلاً از PostCSS برای Autofrefixer یا اهداف دیگر استفاده می کنید ، ممکن است نیازی به Sass نباشد.

سرعت پردازش

کامپایلر آهسته و مبتنی بر یاقوت ساس مدت زیادی است که از بین رفته است و آخرین نسخه از یک کامپایلر استفاده می کند دارت زمان اجرا سریع است

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

با این حال ، اگر در حال حاضر PostCSS را بعد از Sass اجرا می کنید ، این اختلاف سرعت کمتر محسوس خواهد بود. یک فرآیند دو مرحله ای می تواند کندتر از استفاده از PostCSS به تنهایی باشد ، زیرا بیشتر کارهای آن شامل توکن سازی خواص CSS است.

سفارشی سازی

زبان Sass شامل مجموعه ای گسترده از ویژگی ها از جمله متغیرها ، تودرتو ، جزئیات ، مخلوط ها و موارد دیگر است. موارد منفی وجود دارد:

1. به راحتی نمی توانید ویژگی های جدید اضافه کنید.

   شاید شما می خواهید گزینه ای برای تبدیل رنگ های HSLA به RGB باشد. ممکن است نوشتن یک تابع سفارشی امکان پذیر باشد ، اما سایر الزامات غیرممکن است – مانند خط کشی SVG به عنوان تصویر پس زمینه.

2. به راحتی نمی توانید مجموعه ویژگی ها را محدود کنید.

   شاید شما ترجیح می دهید تیم شما از لانه سازی یا @extend. قوانین پر کردن به شما کمک خواهد کرد ، اما معتبر بودن تنظیم Sass را متوقف نمی کند .scss فایل ها.

PostCSS قابل تنظیم تر است.

PostCSS به تنهایی کاری از پیش نمی برد. قابلیت پردازش به یک یا چند مورد نیاز دارد بسیاری از پلاگین های موجود. بیشتر آنها یک کار را انجام می دهند ، بنابراین اگر نمی خواهید لانه سازی کنید ، یک پلاگین nesting اضافه نکنید. در صورت لزوم می توانید پلاگین های خود را بنویسید در یک ماژول استاندارد JavaScript که می تواند قدرت Node.js را مهار کند.

PostCSS را نصب کنید

از PostCSS می توان با استفاده کرد webpack ، Parcel ، Gulp.js و سایر ابزارهای ساخت، اما این آموزش نحوه اجرای آن را از خط فرمان نشان می دهد.

در صورت لزوم ، یک پروژه جدید Node.js را با آن مقداردهی اولیه کنید npm init. با نصب ماژول های زیر برای basic PostCSS را تنظیم کنید .scss تجزیه با افزونه ها برای جزئیات ، متغیرها ، mixins ، تودرتو و پیشوند خودکار:

npm install --save-dev postcss postcss-cli postcss-scss postcss-advanced-variables postcss-nested autoprefixer

مانند پروژه نمونه، PostCSS و پلاگین های آن به صورت محلی نصب می شوند. اگر به احتمال زیاد پروژه های شما از نظر تنظیمات متفاوت باشند ، این یک گزینه عملی است.

توجه: PostCSS فقط از طریق یک فایل JavaScript قابل اجرا است اما postcss-cli ماژول یک لفافه فراهم می کند که می توان آن را از خط فرمان فراخوانی کرد. postcss-scss ماژول اجازه می دهد تا PostCSS را بخواند .scss پرونده ها را تغییر نمی دهد.

پیکربندی خودکار اصلاح

استفاده از پیش تصحیح خودکار لیست مرورگرها برای تعیین پیشوندهای فروشنده با توجه به لیست مرورگرهای پشتیبانی شده شما ، لازم است. ساده ترین تعریف این لیست به صورت a "browserslist" آرایه در package.json. مثال زیر پیشوندهای فروشنده را اضافه می کند که هر مرورگری حداقل 2٪ سهم بازار داشته باشد:

"browserslist": [
  "> 2%"
],

اولین ساخت شما

شما به طور معمول یک ریشه Sass دارید .scss پرونده ای که تمام پرونده های جزئی / م componentلفه مورد نیاز را وارد می کند. مثلا:

// root Sass file
// src/scss/main.scss
@import '_variables';
@import '_reset';
@import 'components/_card';
// etc.

تدوین را می توان با دویدن شروع کرد npx postcss، به دنبال فایل ورودی ، یک --output پرونده ، و هر گزینه مورد نیاز مثلا:

npx postcss ./src/scss/main.scss 
    --output ./build/css/main.css 
    --env development 
    --map 
    --verbose 
    --parser postcss-scss 
    --use postcss-advanced-variables postcss-nested autoprefixer

این دستور:

1. تجزیه ./src/scss/main.scss
2. خروجی به ./build/css/main.css
3. تنظیم می کند NODE_ENV متغیر محیط به development
4. یک فایل نقشه منبع خارجی را خروجی می دهد
5. پیام های خروجی و خطا را تنظیم می کند
6. تنظیم می کند postcss-scss تجزیه کننده ساس ، و
7. از افزونه ها استفاده می کند postcss-advanced-variables، postcss-nested، و autoprefixer برای مدیریت جزئیات ، متغیرها ، mixins ، تودرتو و پیشوند خودکار

در صورت تمایل ، می توانید اضافه کنید --watch برای کامپایل خودکار هنگامی که .scss پرونده ها اصلاح می شوند.

ادامه مطالعه نحوه استفاده از PostCSS به عنوان یک گزینه قابل تنظیم برای Sass در SitePoint.