بهترین پیش پردازنده های سی اس اس در سال 2018

بهترین پیش پردازنده های سی اس اس در سال 2018 : در این مقاله به بررسی پیش پردازنده های سی اس اس یا همان (preprocessor) ها میپردازیم .پیش پردازنده ها برای آسان کردن کار ها با سری امکانات بسیار جالب و خوب بوجود آمده تا برای توسعه دهندگان وب کار را آسان و جذاب تر کند .در هر بخش از معرفی پیش پردازنده های قابلیت ها و محبوبیت آنها نیز بررسی میشود و از هرکدام یک نمونه کد خواهیم گذاشت .

1. Sass

بهترین پیش پردازنده های سی اس اس در سال 2018
بهترین پیش پردازنده های سی اس اس در سال 2018

این پیش پردازنده که بسیار محبوب است و یکی از قدیمی ترین پیش پردازنده های سی اس اس است در صدر جدول پیش پردازنده های هنوز میتازد و یکی از بهترین هاست .این پیش پردازنده دو نسخه دارد که یکی Sass و دیگری Scss است . که نسخه دوم خیلی به سینتکس و یا همان نوشتار سی اس اس نزدیک است و تقریبا بهتر از نسخه قبلی است . (نظر شخصی من)

(برای استفاده از سس نیاز به روبی دارید)

نوشتار و سینتکس Sass :

نوشتار و سینتکس Scss :

همانطور که مشاهده میکنید نسخه دوم Sass که نام آن Scss است و توسط خیلی از توسعه دهندگان پیشنهاد شده به سینتکس طبیعی سی اس اس نزدیک تر است .داکیومنت سایت : Sass Documentation

2. Less.js

بهترین پیش پردازنده های سی اس اس در سال 2018
بهترین پیش پردازنده های سی اس اس در سال 2018

این پیش پردازنده سی اس  اس نیز که با جاوا اسکریپت نوشته شده و شما نوشتار جاوا اسکریپت را نیز میتوانید در آن بکار ببرید هم بسیار محبوب و آسان است که برای یادگرفتن شاید 1 یا 2 ساعت زمان نیاز داشته باشید .این پیش پردازنده راه اندازی بسیار آسانی دارد و با گذاشتن لینک CDN آن میتوانید آن را راه اندازی کنید . و یکی از رقیب های Sass است .

نمونه کد میکس این در لس :

داکیومنت سایت : Less.js Documentation

3. Stylus

بهترین پیش پردازنده های سی اس اس در سال 2018
بهترین پیش پردازنده های سی اس اس در سال 2018

Stylus نیز یکی از رقبای قدرتمند Sass است که یک سری امکانات جالب نیز دارد به عنوان مثال : saturation() متد که با آن saturation رنگ ها را با کمی ریاضیات تنظیم میکنید .سینتکس آن به طوری است که شما میتوانید ({}) و (:) و (;) را میتوانید حذف کنید .

یک سینتکس و نوشتار در Stylus :

که نوشتار بالا به این صورت کامپایل میشود :

داکیومنت سایت : Stylus Documentation

4. CSS-Crush

بهترین پیش پردازنده های سی اس اس در سال 2018
بهترین پیش پردازنده های سی اس اس در سال 2018

این پیش پردازنده نیز یکی از خوب های پیش پردازنده های سی اس اس است و تقریبا همه امکاناتی که در نظر دارید را برای شما فراهم میکند .از این پیش پردازنده در سایت های : WordPress, Magento نیز استفاده شده است .

نمونه کد Css-Crush :

در نمونه کد بالا یک متغیر تعریف شده است . که در کد زیر از آن در مدیا کوئری استفاده میکنیم :

داکیومنت سایت : CSS-Crush Documentation

5. Myth

بهترین پیش پردازنده های سی اس اس در سال 2018
بهترین پیش پردازنده های سی اس اس در سال 2018

این پیش پردازنده به شما اجازه میدهد از Calc() که در بسیاری از مرورگر های ساپورت نمیشود استفاده کنید بدون اینکه نگران ساپورت براورزر ها باشید و با خیال راحت از آن استفاده کنید . (+ خیلی از امکانات دیگر …)لازم به ذکر است که این پیش پردازنده نیاز به Node.js برای اجرا شدن دارد .

نمونه کد استفاده از Calc در Myth :

کامپایل شده به سی اس اس طبیعی :

یک پوینت مثبتی که این پیش پردازنده دارد این است که شما نیاز به یادگیری نوشتار و سینتکس جدیدی ندارید و از همان سینتکس طبیعی سی اس اس استفاده میکند .

داکیومنت سایت : Myth Documentation

علی

سلام من علی هستم یکی از نویسنده های کدفرند و به وب و دنیای اینترنت شدیدا علاقه دارم .

همه مطالب این نویسنده

تاکنون هیچ نظری ثبت نشده است