LESS و SASS و تفاوت آنها

در این مقاله از کاپنا به LESS و  SASS و تفاوت آنها می پردازیم.

LESS  و  SASS هر دو فریم ورک هایی برای نوشتن کد های css بهینه سازی شده و آسان کردن ساخت استایل ها در کوتاه ترین زمان ممکن هستند.

مهم ترین کاری که LESS  و  SASS انجام میدهند ، جلوگیری از تکرار کدهای css است. این دو تفاوت هایی دارند که در این مقاله با آن ها آشنا خواهید شد.

LESS چیست؟

LESS یکی از فریم ورک های css است که از قوانین css استفاده میکند، LESS توسط روش هایی مانند متغییرها، حسابگر ها، توابع، قابلیت های css را توسعه داده  به گونه ای که میتوان کدهای LESS را در یک فایل css  نوشت. کامپایلر اصلی LESS با استفاده از جاوا اسکریپت نوشته شده است و کد های نگارش یافته را به فرمت استاندار css تبدیل میکند. نگارش استایل ها با دید ماژولار از قابلیت های فریم ورک است.

Mixin ها در LESS

Mixinها مشابه متغیرها عمل میکنند با این تفاوت که بجای نگهداری یک مقدار ساده، قادر به ذخیره‌ی تمامی مشخصه های یک class یا id هستند. کافیست نام یک کلاس یا id را به عنوان یک مشخصه ی CSS استفاده کنیم تا LESS به آن مراجعه کرده و تمامی مشخصه های آن را به محل جدید اضافه نماید. این مورد توسط نمونه ی زیر به خوبی قابل درک است. همچنین Mixinها امکان دریافت پارامتر را نیز دارا می باشند.

SASS چیست؟

SASS زبان پیشرفته css ، پایدار و قدرتمند است. SASS  قدرت و ظرافت را به زبان اصلی اضافه میکند و به شما این امکان را می دهد که از متغییرها ، قوانین توافقی ، مخلوط ها ، واردات درون خطی و غیره استفاده کنید. SASS کمک می کند تا استایل های بزرگ را به خوبی سازماندهی کنید و استایل های کوچک را به سرعت و به ویژه با کمک کتابخانه کوچک compass دریافت کنید.

 

 

تبدیل SASS به CSS

برداشت اشتباهی که خیلی از افراد از SASS دارند این است که پس از اتمام کار می بایست فایل ها (SASS،SCSS) مستقیما بر روی سرور قرار گیرند تا مرورگر آن ها را بخواند.

متاسفانه این برداشت غلط می باشد و شما بعد از اتمام کار می بایست برای خوانده شدن توسط مرورگرها آن فایل ها را به CSS تبدیل کنید. به این صورت که شما باید به روش لوکال کد نویسی خود را انجام دهید و بعد از کامپایل آن خروجی CSS را بر روی سرور قرار دهید.

برای کامپایل یا تبدیل SASS به CSS می توانید با استفاده از Ruby و نصب SASS روی آن و یا نرم افزارهایی همچون Prepros این کار را به صورت لحظه به لحظه و یا به یکباره انجام داد.

شباهت های بین LESS و SASS

·        کلاس‌ها (Class)

·        پارامترها

·        قانون کلاس‌های تو در تو که باعث می‌شود از کدهای تکراری جلوگیری شود.

·        توابعی که باعث می‌شود بتوانید از محاسبات ریاضی در CSS استفاده کنید.

·        توابعی برای رنگ‌ها که باعث می‌شود بهتر رنگ‌ها را انتخاب کنید.

·        قابلیتی که باعث می‌شود گروهی از استایل‌ها را فراخوانی کنید.

·        قابلیت scope که باعث می‌شود استایل‌های خود را به صورت local مدیریت کنید.

·        ارزیابی‌هایی از جاوا اسکریپت که باعث می‌شود آن را در طراحی سایت خود استفاده کنید. ۀ«هۀالئربیئرمب ۀ«هۀالئربیئرمب

تفاوتهای SASS و LESS

مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان client-side و از طرفی دیگر SASS فقط روی Ruby اجرا می‌شود که یک زبان سمت سرور است. خیلی از توسعه دهنده ها ممکن است از LESS استفاده نکنند چون همانطور که گفته شد LESS یک library جاوااسکریپت است و ممکن است که کاربر جاوااسکریپت را غیر فعال کند ولی SASS چنین مشکلی ندارد.

برای اطلاعات بیشتر مقالات ما را در گروه تبلیغات و نرم افزاری کاپنا دنبال کنید. ۀ«هۀالئربیئرمب ۀ«هۀالئربیئرمب ۀ«هۀالئربیئرمب

توسط گروه تبلیغاتی کاپنا - تاریخ : 4 آذر 1398