تاریخ انتشار : 1404/3/17
مقدمه (Introduction)
Sass (Syntactically Awesome Style Sheets) یک پیشپردازنده CSS است که امکان نوشتن کدهای CSS را با ویژگیهای پیشرفتهتر مانند متغیرها، توابع، میکسینها و ... فراهم میکند. Sass به توسعهدهندگان کمک میکند تا کدهای تمیزتر، ماژولارتر و قابلنگهداریتری بنویسند.
تاریخچه Sass (History of Sass)
Sass توسط Hampton Catlin طراحی شد و اولین بار در سال ۲۰۰۶ منتشر شد. سپس Natalie Weizenbaum و Chris Eppstein با توسعهی آن، Sass را به یکی از محبوبترین پیشپردازندههای CSS تبدیل کردند.
انواع Syntax در Sass (Sass Syntax Types)
Sass دو نوع سینتکس اصلی دارد:
- SCSS (Sassy CSS) - نزدیک به CSS معمولی و با پسوند
.scss. - Indented Syntax (Sass) - بدون آکولاد و با تورفتگی، با پسوند
.sass.
نصب Sass (Installing Sass)
برای استفاده از Sass، میتوانید آن را از طریق npm نصب کنید:
npm install -g sass
یا با استفاده از ابزارهایی مانند Dart Sass یا LibSass.
متغیرها در Sass (Variables in Sass)
با استفاده از $ میتوانید متغیر تعریف کنید:
$primary-color: #3498db;
body {
background-color: $primary-color;
}
Nesting در Sass (Nesting in Sass)
به جای تکرار سلکتورها، میتوانید آنها را تودرتو بنویسید:
nav {
ul {
margin: 0;
li {
display: inline-block;
}
}
}
Mixins در Sass (Mixins in Sass)
Mixins امکان استفاده مجدد از کدها را فراهم میکنند:
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
}
ورودیهای Mixins (Mixin Arguments)
میتوانید به mixins پارامتر ارسال کنید:
@mixin border-radius($radius) {
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
Extend/Inheritance در Sass (Extend in Sass)
با @extend میتوانید استایلها را به کلاسهای دیگر ارثبری دهید:
.message {
border: 1px solid #ccc;
}
.success {
@extend .message;
color: green;
}
Partials و Import در Sass (Partials & Import in Sass)
فایلهای جزئی (Partials) با _ شروع میشوند و در فایل اصلی ایمپورت میشوند:
@import 'variables';
@import 'mixins';
عملگرها در Sass (Operators in Sass)
میتوانید از عملگرهای ریاضی استفاده کنید:
.container {
width: 100% / 3;
}
توابع در Sass (Functions in Sass)
توابع سفارشی با @function ساخته میشوند:
@function calculate-margin($size) {
@return $size * 2;
}
.box {
margin: calculate-margin(10px);
}
کنترل Flow در Sass (Control Flow in Sass)
با @if, @for, @each و @while میتوانید منطق شرطی پیادهسازی کنید:
@for $i from 1 through 3 {
.item-#{$i} { width: 100px * $i; }
}
ماژولها در Sass (Modules in Sass)
در نسخههای جدید، میتوانید از @use به جای @import استفاده کنید:
@use 'variables' as vars;
body {
color: vars.$primary-color;
}
تفاوت Sass و SCSS (Sass vs SCSS)
- Sass: بدون آکولاد، با تورفتگی.
- SCSS: شبیه CSS معمولی، با آکولاد.
مزایای Sass (Advantages of Sass)
- کاهش تکرار کد
- قابلیت ماژولار کردن استایلها
- پشتیبانی از توابع و منطق برنامهنویسی
معایب Sass (Disadvantages of Sass)
- نیاز به کامپایل قبل از استفاده
- یادگیری اضافی برای توسعهدهندگان
ابزارهای مرتبط با Sass (Sass Tools)
- Dart Sass: پیادهسازی اصلی Sass
- LibSass: نسخه C++ برای کامپایل سریعتر
- Prepros/Gulp/Webpack: برای اتوماسیون کامپایل
جمعبندی (Conclusion)
Sass یک ابزار قدرتمند برای توسعهدهندگان فرانتاند است که با ارائه متغیرها، mixins، nesting و سایر ویژگیها، نگهداری و توسعه CSS را آسانتر میکند.
امیدوارم این مقاله برای شما مفید بوده باشد! 🚀
نظرات کلی کاربران درباره مقاله ها