مقدمه (Intro)
در این مقدمه Sass با یک پیش پردازنده (Pre-processor) برای CSS آشنا می شوی. پیش پردازنده یعنی ابزاری که کد را قبل از استفاده تبدیل می کند. با Sass تکرار کم می شود و تغییرات سریع می شود. مثل وقتی که برای تکالیف یک الگو داری و فقط مقادیر را عوض می کنی.
Sass چیست؟
Sass یعنی Syntactically Awesome Stylesheet. Sass یک افزونه روی CSS است. Sass با همه نسخه های CSS سازگار است. Sass تکرارها را کم می کند و زمان ذخیره می کند. این پروژه در 2006 معرفی شد و رایگان است.
چرا از Sass استفاده کنیم؟
فایل های استایل بزرگ و پیچیده شده اند. بنابراین نگهداری سخت می شود. Sass امکاناتی مثل متغیر (Variable)، قوانین تو در تو، میکسین ها (Mixins)، ایمپورت، وراثت، و توابع آماده می دهد. بنابراین کد مرتب تر و توسعه سریع تر می شود.
نمونه ساده؛ رنگ های اصلی
/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* use the variables */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
نکته: با تغییر یک متغیر، کل رنگ بندی هماهنگ عوض می شود. بنابراین مدیریت تم بسیار ساده می شود.
Sass چگونه کار می کند؟
مرورگر کد Sass را نمی فهمد. بنابراین باید «ترنس پایل (Transpile)» شود. ترنس پایل یعنی تبدیل کد از یک زبان به زبان دیگر. یک برنامه ترنس پایلر کد Sass می گیرد و CSS استاندارد برمی گرداند.
نوع فایل و کامنت ها
فایل Sass پسوند .scss دارد. کامنت استاندارد /* ... */ و کامنت درون خطی // ... نیز پشتیبانی می شود.
/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* use the variables */
.main-header {
background-color: $primary_1; // inline comment is allowed
}
شروع سریع در 3 گام
- پروژه ساده بساز و Sass را آماده کن.
- فایل
.scssبساز و متغیرها را تعریف کن. - کد را ترنس پایل کن و CSS خروجی را لود کن.
برای ادامه، صفحه نصب Sass را ببین. همچنین صفحه متغیرهای Sass مفید است. اگر نیاز داشتی، همین صفحه مقدمه Sass را مرور کن.
جمع بندی سریع
- Sass افزونه سازگار برای CSS است.
- ویژگی های بیشتری مثل متغیر و میکسین دارد.
- تغییرات سراسری را خیلی سریع می کند.
- خروجی نهایی همیشه CSS استاندارد است.