بهترین پیش پردازنده های سی اس اس در سال 2018
بهترین پیش پردازنده های سی اس اس در سال 2018 : در این مقاله به بررسی پیش پردازنده های سی اس اس یا همان (preprocessor) ها میپردازیم .پیش پردازنده ها برای آسان کردن کار ها با سری امکانات بسیار جالب و خوب بوجود آمده تا برای توسعه دهندگان وب کار را آسان و جذاب تر کند .در هر بخش از معرفی پیش پردازنده های قابلیت ها و محبوبیت آنها نیز بررسی میشود و از هرکدام یک نمونه کد خواهیم گذاشت .
1. Sass
این پیش پردازنده که بسیار محبوب است و یکی از قدیمی ترین پیش پردازنده های سی اس اس است در صدر جدول پیش پردازنده های هنوز میتازد و یکی از بهترین هاست .این پیش پردازنده دو نسخه دارد که یکی Sass و دیگری Scss است . که نسخه دوم خیلی به سینتکس و یا همان نوشتار سی اس اس نزدیک است و تقریبا بهتر از نسخه قبلی است . (نظر شخصی من)
(برای استفاده از سس نیاز به روبی دارید)
نوشتار و سینتکس Sass :
$serif-font-stack: "Georgia", "Times New Roman", serif $monospace-font-stack: "Cousin", "Courier" body font: normal 18px/22px $serif-font-stack pre, code font: 600 bold 18px/22px $monospace-font-stack
نوشتار و سینتکس Scss :
$serif-font-stack: "Georgia", "Times New Roman", serif; $monospace-font-stack: "Cousin", "Courier"; body { font: normal 18px/22px $serif-font-stack; } pre, code { font: 600 bold 18px/22px $monospace-font-stack; }
همانطور که مشاهده میکنید نسخه دوم Sass که نام آن Scss است و توسط خیلی از توسعه دهندگان پیشنهاد شده به سینتکس طبیعی سی اس اس نزدیک تر است .داکیومنت سایت : Sass Documentation
2. Less.js
این پیش پردازنده سی اس اس نیز که با جاوا اسکریپت نوشته شده و شما نوشتار جاوا اسکریپت را نیز میتوانید در آن بکار ببرید هم بسیار محبوب و آسان است که برای یادگرفتن شاید 1 یا 2 ساعت زمان نیاز داشته باشید .این پیش پردازنده راه اندازی بسیار آسانی دارد و با گذاشتن لینک CDN آن میتوانید آن را راه اندازی کنید . و یکی از رقیب های Sass است .
نمونه کد میکس این در لس :
.button { display: inline-block; width: 80%; max-width: 200px; border-radius: 5px; background-color: black; color: white; font-size: 14px; margin: 5px; padding: 8px; } .button-checkout- process { .button(); /* Mixin */ background-color: silver; }
داکیومنت سایت : Less.js Documentation
3. Stylus
Stylus نیز یکی از رقبای قدرتمند Sass است که یک سری امکانات جالب نیز دارد به عنوان مثال : saturation() متد که با آن saturation رنگ ها را با کمی ریاضیات تنظیم میکنید .سینتکس آن به طوری است که شما میتوانید ({}
) و (:
) و (;
) را میتوانید حذف کنید .
یک سینتکس و نوشتار در Stylus :
.button display inline-block border-color saturation(#000, 50%) border-radius 5px
که نوشتار بالا به این صورت کامپایل میشود :
.button { display: inline-block; border-color: #959595; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
داکیومنت سایت : Stylus Documentation
4. CSS-Crush
این پیش پردازنده نیز یکی از خوب های پیش پردازنده های سی اس اس است و تقریبا همه امکاناتی که در نظر دارید را برای شما فراهم میکند .از این پیش پردازنده در سایت های : WordPress, Magento نیز استفاده شده است .
نمونه کد Css-Crush :
@set { smartphone-width: 320px; tablet-width: 768px; laptop-width: 1680px; 4k-monitor-width: 3840px; }
در نمونه کد بالا یک متغیر تعریف شده است . که در کد زیر از آن در مدیا کوئری استفاده میکنیم :
@media only screen and (min-device-width: smartphone-width) { h1 { font-size: 24px; } }
داکیومنت سایت : CSS-Crush Documentation
5. Myth
این پیش پردازنده به شما اجازه میدهد از Calc() که در بسیاری از مرورگر های ساپورت نمیشود استفاده کنید بدون اینکه نگران ساپورت براورزر ها باشید و با خیال راحت از آن استفاده کنید . (+ خیلی از امکانات دیگر …)لازم به ذکر است که این پیش پردازنده نیاز به Node.js برای اجرا شدن دارد .
نمونه کد استفاده از Calc در Myth :
.container { margin: calc(7px*2); }
کامپایل شده به سی اس اس طبیعی :
.container { margin: 14px; }
یک پوینت مثبتی که این پیش پردازنده دارد این است که شما نیاز به یادگیری نوشتار و سینتکس جدیدی ندارید و از همان سینتکس طبیعی سی اس اس استفاده میکند .
داکیومنت سایت : Myth Documentation