Sass چیست؟
Sass یک پیش پردازنده (Preproccesor) برای زبان CSS است. در واقع Sass آمده است تا محدودیت‌ها و ضعف‌های زبان CSS را جبران کند و با اضافه کردن ویژگی‌های جالبی به آن ، نوشتن کدهای CSS را راحت تر و سریع تر سازد.
می‌توان گفت که Sass محبوب ترین و پرکاربرد ترین پیش پردازنده برای CSS است . برای اضافه کردن Sass به پروژه خود تنها کافیست تا نرم‌افزار کامپایل کدهای Sass به CSS را نصب کنید و سپس به جای پسوند .CSS از پسوند‌های .Sass و .Scss برای فایل‌های استایل استفاده کنید.
اگر با مفهوم پیش پردازنده یا همان Preproccesor آشنایی ندارید پیشنهاد می‌کنم حتما این مقاله را بخوانید.
Sass دو Syntax مختلف با نام‌های Sass و Scss برای نوشتن کدها به این زبان در نظر گرفته است که استفاده از آنها فقط و فقط به راحتی و سلیقه شما بر می‌گردد. بصورت کلی می‌توان گفت کدها در Sass خلاصه تر و راحت تر از Scss نوشته می‌شوند.
باید دقت داشته باشید که Syntax مورد نظر خود را در ابتدای کار مشخص کنید. اگر با Sass راحت‌تر هستید باید پسوند فایل‌ها هم .Sass باشند. اما اگر با Scss راحتید باید پسوند فایل‌ها را .Scss قرار دهید.
نکته: ما در این مقاله از Syntax و پسوند Sass استفاده می‌کنیم.
نصب Sass
نرم افزار‌هایی برای کامپایل کدهای Sass به CSS وجود دارند. می‌توانید لیست این نرم افزار‌ها را از این لینک مشاهده کنید. یکی از نرم‌افزار‌های محبوب و البته رایگان برای اینکار، Scout-App است. این نرم‌افزار متن باز (Open Source) برای سیستم‌عامل‌های Mac، Windows و Linux در دسترس است.
برای دانلود و نصب این نرم‌افزار می‌توانید به وبسایت رسمی آن یعنی scout-app.io مراجعه کنید.
آموزش مقدماتی Sass
ایجاد متغیر (Variables)
با استفاده از متغیر شما می‌توانید مقداری را ذخیره کرده و بعدا بارها از آن در مکان‌های مختلف استفاده کنید. به مثال زیر توجه کنید:
CSS compiled code:
|
۱
۲
۳
۴
|
body {
font: ۱۰۰% iran-sans, sans–serif;
color: #۳۳۳;
}
|
Sass code:
|
۱
۲
۳
۴
۵
۶
|
$font–stack: iran-sans, sans–serif
$primary–color: #۳۳۳
body
font: ۱۰۰% $font–stack
color: $primary–color
|
در مثال بالا ما یک متغیر برای نام فونت‌ها و رنگ ساختیم و از این متغیرها در ادامه استفاده کردیم. یکی از مزایای ایجاد متغیر این است که اگر بعدها خواستید رنگی را تغییر دهید فقط کافیست تا مقدار متغیر مربوط به آن را تغییر دهید.
چون ممکن است شما از یک رنگ خاص بارها در پروژه خود استفاده کنید، به همین علت تغییر آن بدون تعریف متغیر ممکن است کمی دردسر ساز باشد.
تو در تو (Nesting)
همانطور که می‌دانید در HTML می‌توان عناصر را بصورت تودرتو نوشت. به لطف Sass این امکان به CSS هم اضافه می‌شود. یعنی در Sass می‌توانید عناصر را بصورت تودرتو بنویسید. به مثال زیر دقت کنید:
CSS compiled code:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
|
navigation ul {
margin: ۰;
padding: ۰;
list–style: none;
}
navigation li {
display: inline–block;
}
navigation a {
display: block;
padding: ۶px 12px;
text–decoration: none;
}
|
Sass code:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
|
navigation
ul
margin: ۰
padding: ۰
list–style: none
li
display: inline–block
a
display: block
padding: ۶px 12px
text–decoration: none
|
در این مثال عناصر ul، li و a درون عنصر navigation قرار دارند که در Sass آنها را به شکل تودرتو نوشته‌ایم.
ایجاد توابع (Mixins)
خیلی از قطعه کدها در CSS در مکان‌های مختلفی تکرار می‌شوند و هیچ راهی برای جلوگیری از تکرار آنها نداریم. اما در Sass این مشکل به کمک Mixins حل شده است. به زبان ساده Mixin همان function در زبان‌های برنامه‌نویسی است. با استفاده از Mixin می‌توان یک الگو ایجاد کرده و از آن الگو هزاران بار در برنامه استفاده کرد.
CSS compiled code:
|
۱
۲
۳
۴
۵
|
.box {
–webkit–transform: rotate(۳۰deg);
–ms–transform: rotate(۳۰deg);
transform: rotate(۳۰deg);
}
|
Sass code:
|
۱
۲
۳
۴
۵
۶
|
=transform($property)
–webkit–transform: $property
–ms–transform: $property
transform: $property
.box
+transform(rotate(۳۰deg))
|
با استفاده از این مثال‌ها تنها بخش کوچکی از قدرت و ویژگی‌های Sass را به شما نشان دادیم. برای یادگیری کامل این پیش‌پردازنده می‌توانید به مستندات وبسایت رسمی Sass مراجعه کنید.