SASS (Syntactically Awesome Stylesheets) یک پیشرفته‌تر و ساده‌تر از CSS است که فرآیند استایل‌دهی را سریع‌تر و آسان‌تر می‌کند. این ابزار به دلیل امکاناتی مثل nesting، متغیرها و قابلیت تکرارپذیری در کدنویسی، محبوبیت بالایی بین طراحان وب دارد.
روش استفاده؟
نصب ابزارهای موردنیاز
برای استفاده از SASS، مرورگر باید فایل‌های CSS را بشناسد. بنابراین نیاز به کامپایل کردن SASS به CSS داریم. این کار با افزونه Live Sass Compiler انجام می‌شود.
- ابتدا Live Sass Compiler را در ویرایشگر (مثلاً VS Code) نصب کنید.
- فایل‌های SASS را با پسوند
.scssایجاد کنید.
فرآیند کامپایل
- پس از نوشتن کد، دکمه Watch Sass را فشار دهید.
- دو فایل جدید CSS به پروژه اضافه خواهد شد:
- فایل style.css
- فایل بهینه‌شده style.min.css
- در فایل HTML باید فقط فایل style.min.css را به پروژه لینک کنید.
ویژگی‌های برجسته SASS
1. قابلیت Nesting
با استفاده از ساختار nesting، می‌توانید کدها را خواناتر و مرتب‌تر بنویسید. به جای استایل‌دهی جداگانه به فرزند یک تگ، می‌توانید استایل آن را در دل استایل پدر تعریف کنید.
نمونه کد:
.parent {
color: black;
.child {
color: white;
}
&:hover {
color: gray;
}
}
2. متغیرها
متغیرها به شما امکان ذخیره و استفاده از مقادیر خاصی را می‌دهند که در کل فایل مورد استفاده قرار می‌گیرند.
تعریف متغیر:
$rang: blue;
body {
background-color: $rang;
}
3. Mixin و Include
با استفاده از @mixin می‌توانید استایل‌های تکراری را در یک مکان ذخیره کنید و با @include در هرجای فایل که نیاز دارید از آن‌ها استفاده کنید. حتی امکان تعریف پارامتر نیز وجود دارد.
نمونه کد:
@mixin button-style($color) {
background-color: $color;
border-radius: 5px;
padding: 10px 20px;
}
.button {
@include button-style(blue);
}
4. تقسیم‌بندی فایل‌ها
در پروژه‌های بزرگ، بهتر است فایل‌ها را تقسیم‌بندی کنید. فایل‌هایی که مکرراً استفاده می‌شوند، با علامت _ ایجاد کنید (مثلاً: _component.scss) و سپس با @import آن‌ها را در فایل اصلی استفاده کنید.
نمونه کد:
@import "component";
مزایای SASS نسبت به CSS
- خوانایی و ساختار بهتر کدها.
- کاهش زمان استایل‌نویسی.
- تکرارپذیری و استفاده مجدد از کدها.
- نگهداری آسان‌تر فایل‌های استایل.
- قابلیت شخصی‌سازی با متغیرها و mixinها.
چرا از SASS استفاده کنیم؟
چون ابزاری ضروری برای توسعه‌دهندگان وب است که به دنبال بهبود کیفیت و سرعت کدنویسی استایل‌ها هستند.
- طراحی‌های واکنش‌گرا را سریع‌تر پیاده‌سازی کنید.
- تغییرات گسترده را تنها با تغییر یک متغیر مدیریت کنید.
- از ساختارهای مدرن‌تر و بهینه‌تر استفاده کنید.
برای یادگیری بیشتر و ابزارهای مرتبط، به سایت codebalad.com سر بزنید.
