Sass چیست؟

`Sass` یا Syntactically Awesome Style Sheets، یک زبان پیش‌پردازنده برای CSS است که به توسعه‌دهندگان کمک می‌کند کدهای CSS خود را ساختارمندتر، قابل‌خواندن‌تر و با قابلیت نگهداری بیشتر بنویسند. `Sass` امکاناتی مانند متغیرها، توابع، و وراثت را اضافه می‌کند که در CSS به صورت پیش‌فرض وجود ندارند. این ابزار برای کدنویسی پروژه‌های بزرگ و پیچیده بسیار مفید است، زیرا کدها را سازماندهی کرده و مدیریت آن‌ها را ساده‌تر می‌کند.

ویژگی‌های اصلی Sass

1. متغیرها: امکان تعریف متغیرهایی برای رنگ‌ها، فونت‌ها و سایر خصوصیات را فراهم می‌کند تا در کل پروژه از این مقادیر به صورت متمرکز استفاده شود. به این ترتیب، تغییرات به‌سادگی و با اصلاح تنها یک متغیر اعمال می‌شود.
“`scss
$primary-color: #3498db;
body {
color: $primary-color;
}
“`

2. تو در تو بودن: Sass از ساختار تو در تو یا nesting پشتیبانی می‌کند. این ساختار کدنویسی را ساده‌تر می‌کند و خوانایی CSS را بهبود می‌بخشد.
“`scss
nav {
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
}
}
}
“`

3. وراثت: با استفاده از قابلیت `@extend`، می‌توان استایل‌ها را به ارث برد. این ویژگی به جلوگیری از تکرار کد کمک می‌کند.
“`scss
.button {
border: none;
padding: 10px;
}
.submit-button {
@extend .button;
background-color: green;
}
“`

4. میکسین‌ها (Mixins): میکسین‌ها به شما امکان می‌دهند که تکه کدهایی را تعریف کرده و چندین بار از آن‌ها استفاده کنید، همراه با پارامترهایی که بتوانند متناسب با شرایط مختلف تغییر کنند.
“`scss
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
“`

5. توابع: Sass قابلیت تعریف توابع را دارد که می‌تواند کارهای محاسباتی انجام داده و نتایج را به صورت خروجی برگرداند.
“`scss
@function calculate-spacing($factor) {
@return $factor * 8px;
}
.container {
padding: calculate-spacing(2);
}
“`

6. ماژول‌ها و وارد کردن فایل‌ها: امکان تقسیم‌بندی کدها به فایل‌های کوچک‌تر و وارد کردن آن‌ها در فایل‌های اصلی وجود دارد. این کار باعث سازماندهی بهتر پروژه‌های بزرگ می‌شود.
“`scss
// فایل _header.scss
header {
background-color: blue;
}

// فایل main.scss
@import ‘header’;
“`

تفاوت Sass و SCSS

دو سینتکس یا نگارش برای Sass وجود دارد:
– SCSS: شبیه CSS است و از آکولاد `{}` و سمی‌کالن `;` استفاده می‌کند. این سینتکس به دلیل شباهت به CSS، محبوبیت بیشتری دارد.
– Sass: نگارش قدیمی‌تر است و از بدون آکولاد و سمی‌کالن است؛ بیشتر شبیه به زبان‌های برنامه‌نویسی پایتون و یامله (YAML) است و با تورفتگی و فاصله‌گذاری عمل می‌کند.

نصب Sass

برای استفاده از Sass می‌توان از ابزار خط فرمان یا یک ابزار مدیریت بسته مانند `npm` استفاده کرد:

npm install -g sass

نحوه کامپایل Sass

فایل‌های `.sass` یا `.scss` پس از نوشتن نیاز به کامپایل دارند تا به فایل CSS تبدیل شوند که مرورگر بتواند آن را بخواند. این کار معمولاً به وسیله دستور زیر انجام می‌شود:

sass input.scss output.css

مزایای استفاده از Sass

– قابلیت نگهداری بالا: مدیریت کدها در پروژه‌های بزرگ آسان‌تر می‌شود.
– صرفه‌جویی در زمان: تکرار کمتر کدها و استفاده از ویژگی‌هایی مانند میکسین‌ها و وراثت.
– افزایش خوانایی کد: با استفاده از تو در تو و متغیرها، کدها واضح‌تر و خواناتر می‌شوند.

کاربردهای Sass

– توسعه‌ی رابط‌های کاربری پیچیده: با استفاده از ویژگی‌های پیشرفته، Sass به توسعه‌دهندگان کمک می‌کند رابط‌های کاربری پویا و پیچیده را به‌سادگی طراحی کنند.
– پروژه‌های مقیاس‌پذیر: پروژه‌هایی که نیاز به نگهداری و توسعه‌ی مستمر دارند، از قابلیت‌های سازماندهی و تکرارپذیری Sass بهره می‌برند.

در کل، Sass به توسعه‌دهندگان CSS قدرت بیشتری می‌دهد و آن‌ها را قادر می‌سازد که کدهای CSS را به‌صورت مدولار، مقیاس‌پذیر و قابل نگهداری بنویسند.