فرق LESS با SASS
مقدمه
CSS به تنهایی برای طراحی سایت بسیار مناسب است. اما وقتی که شامل بسیاری از وظایف تکراری می شود و زمانی که برنامه بسیار بزرگ باشد مدیرت استایل صفحات برایش دشوار می شود. برای جلوگیری از این وظایف تکراری و نوشتن CSS به بهترین روش،ما به یک Preprocessor نیاز داریم.
Preprocessor ها ،گسترش یافته ی CSS هستند.Preprocessorها تمامی ویژگی های CSS به همراه ویژگی های اضافه تر مانند متغیر،expression، mixin و... می باشند.یک Preprocessor از نظر کاربر نهایی کار بزرگی را انجام نمی دهد اما می تواند سریعتر و راحت تر توسعه پیدا کند. ازلحاظ عملکرد از دید کاربر نهایی ، Preprocessor ها می توانند همه ی Style Sheet ها را به یک فایل واحد تبدیل کنند.
بنابراین همه ی Style ها برای یک برنامه در یک شبکه رفت و برگشت (round-trip) بارگذاری می شود به جای این که برای هر Style Sheet درخواست های جداگانه شود.
Style ها با استفاده از تعدادی Preprocessor ها ایجاد شده اند که به CSS تبدیل می شوند (Convert) و فایل کامپایل شده CSS در صفحه HTML می باشد، زیرا مرورگر CSS را میفهمد. در این مقاله به یررسی فرق LESS با SASS میپردازیم.
LESS یکی از فریم ورک های CSS است که از قوانین CSS استفاده میکند؛ LESS توسط روش هایی مانند متغیرها، حسابگرها، mixinها و توابع، قابلیت های CSS را توسعه داده و آن را پویا ساخته است. به گونه ای که می توان کدهای لِس را در یک فایل CSS نوشت. کامپایلر اصلی LESS با استفاده از جاوا اسکریپت نوشته شده است و کد های نگارش یافته را به فرمت استاندارد CSS تبدیل میکند. نگارش استایل ها با دید ماژولار از قابلیت های این فریم ورک است. Less خاصیت های پویایی را به CSS اضافه کرده است. به کمک امکانات متعدد آن می توان از زبان CSS به عنوان یک زبان برنامه نویسی استفاده نمود. استفاده مجدد از مقادیر با استفاده از متغیرها، استفاده مجدد از بلاکها با استفاده از mixins ، استایلهای مختصرتر با قوانین تو در تو، انجام محاسبات با استفاده از توابع و عملگرها از جمله کارهایی است که میتوان با این فریم ورک انجام داد.
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>
همچنین یک Server-side version of LESS وجود داره که یک راه آسون برای برای نصب LESS است. همچنین برای نصب LESS روی سرور از این (Node Package Manager (NPM ابزار استفاده کنید.
SASS مخفف Syntactically Awesome Style Sheets می باشد و یک زبان پیش پردازنده CSS یا CSS Preprocessor Language به حساب می آید. SASS اساسا یک روش توسعه یافته از کدنویسی در CSS همراه با سینتکس به حساب می آید.
تعدادی از تصورات غلط از SASS برای افرادی که اصلا از آن استفاده نکرده اند وجود دارد. یکی از آن تصورات غلط این است که آیا SASS جایگزین CSS می باشد؟ در پاسخ به این سوال باید گفت خیر ، جواب منفی می باشد ، SASS جایگزین CSS نمی باشد بلکه یک روش برای کوتاه تر نویسی CSS می باشد که در نهایت بعد از کامپایل شدن به همان CSS تبدیل می شود.
برداشت اشتباهی که خیلی از افراد از SASS دارند این است که پس از اتمام کار می بایست فایل ها (SASS،SCSS) مستقیما بر روی سرور قرار گیرند تا مرورگر آن ها را بخواند.
متاسفانه این برداشت غلط می باشد و شما بعد از اتمام کار می بایست برای خوانده شدن توسط مرورگرها آن فایل ها را به CSS تبدیل کنید. به این صورت که شما باید به روش لوکال کد نویسی خود را انجام دهید و بعد از کامپایل آن خروجی CSS را بر روی سرور قرار دهید.
برای کامپایل یا تبدیل SASS به CSS می توانید با استفاده از Ruby و نصب SASS روی آن و یا نرم افزارهایی همچون Prepros این کار را به صورت لحظه به لحظه و یا به یکباره انجام داد.
برای استفاده از SASS ، ابتدا ما باید Ruby را نصب کنیم.که این کار یک عمل راحتی می باشد.مطمئن شوید گزینه ی" Add Ruby executable to your PAT " را در هنگام نصب تیک زده باشید که این کار باعث می شود که Ruby در کل برنامه در دسترس باشد.اگرچه امروزه editorهای زیادی (که شامل Visual studio 2013 Update 2 و نسخه های بالاتر نیز هستند ) وجود دارند که به صورت ذاتی و تعبیه شده ، پشتیبانی از SASS را انجام می دهند.
از این رو ، اگر شما نمی توانید Ruby را نصب کنید ، جایگزین های دیگری وجود دارد.
Gem به همراه Ruby نصب می شود.Command Prompt را با Ruby باز کنید و SASS را با Gem بوسیله Command زیر نصب کنید.
در صورت بروز هر خطا:
برای تبدیل فایل های SCSS به فایل CSS:
فرق LESS با SASS یکی از سوالات مهم در این بررسی است. برای پاسخ به سوال فرق LESS با SASS بهتر است موارد زیر را بدانید :
در SASS با استفاده از Compass می توان اطمینان داشت که mixin های خود را آپدیت نگه می دارد پس در موقعیت هایی که ممکن است از قسمتی از یک mixin استفاده کنیم ، را کنترل کنیم.
در LESS هم افزونه ای به نام Less Elements وجود دارد , ولی به اندازه SASS قدرتمند نیست.
.module-b { .module-a(); /* Copies everything from .module-a down here */ border: 1px solid red; }
برای انجام اینکار باید کلاس را @extend کرد :
.module-a { /* A bunch of stuff */ } .module-b { /* Some unique styling */ @extend .module-a; }
SASS قدرت extend کردن placeholder ها را هم دارد ،که با در نامگذاری داخلی کمک میکند که با نام کلاس ها تداخل ایجاد نشود.
در SASS یک تکنیکی به نام respond-to وجود دارد که با استفاده از breakpoint ها به شما قدرت اضافه کردن media query ها به mixin ها را می دهد.
کلام آخر…
اگر اجباری برای استفاده از هر کدام از این پیش پردازنده ها ندارید , پیشنهاد میشود که از SASS استفاده کنید.
این هم در نظر داشته باشید که با یاد گرفتن هر کدام از این دو یاد گرفتن دیگری وقت زیادی از شما نخواهد گرفت.
فرق LESS با SASS