SASS چیست؟
SASS مخفف Syntactically Awesome Style Sheets است که توسط آقای Hampton Catlin طراحی و ایجاد شده است و همانند CoffeeScript که پس از کامپایل به جاوااسکریپت تبدیل میشد، SASS نیز پس از کامپایل به CSS تبدیل میشود. SASS با استفاده از متغیرها، mixins، ارث بری و قوانین تودرتو، CSS را با مهارت زیادی در بهترین حالت تولید میکند.
SASS باعث کمتر نوشتن کد CSS، سبب افزایش خوانایی و دستکاری کردن راحتتر و پویای آن میشود. این مساله راهی عالی برای نوشتن کدهای CSS کاربردیتر است و میتواند سرعت گردش کار هر توسعه دهنده و یا طراح وب را افزایش دهد.
وقتی اولین بار SASS عرضه شد، syntax آن تفاوت قابل توجهی با CSS داشت (پسوند فایلهای آن SASS. است) که به جای نوشتن براکتها، از تورفتگی استفاده میشد و دیگر نیازی به نوشتن ";" نبود. البته با عدم استقبال از این syntax مواجه شد و با عرضهی نسخه 3 SASS، (که پسوند فایلهای آن SCSS. است) syntax آن بسیار شبیه به CSS شد؛ البته با همهی ویژگیهای SASS.
برای مثال کد CSS زیر را میخواهیم به دو روش بنویسیم:
header {
margin: 0;
padding: 0;
color: #fff;
}
با استفاده از روش SCSS. (روش جدید)
$color: #fff;
header {
margin: 0;
padding:0;
color: $color;
}
با استفاده از روش SASS. (روش قدیم)
$color: #fff
header
margin: 0
padding: 0
color: $color
همانطور که مشاهده میکنید برای نوشتن مقدار color از متغیر color$ استفاده کردیم . در ادامه به قابلیتهای SASS خواهیم پرداخت.
توجه: syntax ایی که در این سری آموزشی با آن کار میکنیم
SCSS. است.
کامپایل کردن SASS
روشهای مختلفی برای کامپایل فایلهای SASS وجود دارند:
- روش اصلی استفاده از SASS در Ruby است که پس از نصب Ruby و اجرای فرمان SASS ،gem install sass نصب میشود و برای کامپایل، اجرای فرمان زیر:
sass myfile.scss myfile.css
- استفاده از برنامههای گرافیکی مانند Hammer , CodeKit و Compass.
- استفاده از برنامههای رایگان مانند libsass که با یک کامپایلر سریع نوشته شده با ++C/C است و همچنین میتوانید libsass را از طریق NPM با node-sass نصب کنید.
نکته: در صورتیکه میخواهید با استفاده از Ruby کار کامپایل را انجام دهید در هنگام نصب Ruby گزینهی "Add Ruby executables to your PATH" را تیک بزنید.
خب سوالی که ممکن است برای شما پیش آمده باشد این است که باید از کدام یک از این روشها را استفاده کنیم؟
بستگی به این دارد که شما چه کاری را میخواهید انجام دهید.
- در صورتیکه بر روی یک پروژهی بزرگ با میزان کد زیاد کار میکنید، استفاده از Ruby SASS، کمی کند کار کامپایل را انجام میدهد.
- اگر بخواهید از libsass استفاده کنید، این مسئله وجود دارد که به طور %100 با قابلیتهای Ruby SASS برابری ندارد.
- در صورتیکه نمیخواهید از command line استفاده کنید، برنامههای گرافیکی گزینهای عالی هستند. شما میتوانید طوری تنظیم کنید که تمامی تغییراتی که در فایل SASS انجام میشود، به صورت خودکار کار کامپایل انجام شود.
- اگر هم فقط میخواهید کدی را که نوشتهاید تست کنید، میتوانید از ابزارهای آنلاین مانند SassMeister استفاده کنید.