Sass مخفف کلمات Syntactically Awesome Stylesheets است. Sass را می توان به عنوان یک افزونه برای css در نظر گرفت که کار با استایل ها را برای ما بسیار ساده می کند. به خصوص زمانی که فایل های css شما بسیار بزرگ و پیچیده باشند. Sass مدیریت و نگهداری استایل های css را ساده‌تر می‌کند. به لطف وجود متغیرها، mixins ها، nesting ها و وراثت در این پیش پردازنده، کد های نوشته شده کاملاً سازماندهی می شود.
این کار باعث می شود کار خود را سریعتر پیش ببریم. به خاطر داشته باشید زمانی که در Sass کدهای خود را مینویسیم، مرورگر ها نمی توانند این کدها را درک کنند و دلیل این عدم درک هم این است که کدهای نوشته شده به زبان css نیستند.
پس ما به یک کامپایلر نیاز داریم تا کد های نوشته شده در Sass را به css تبدیل کنیم. نرم افزار های زیادی برای این کار وجود دارند که بعضی از آنها عبارتند از :
Hammer
CodeKit
Compass
Koala
با این حال ما قصد نداریم در این مقاله همه مراحل نصب و کامپایل Sass را بیان کنیم. اگر می‌خواهید تجربه بیشتری در این مورد به دست آورید، به شما پیشنهاد می کنم از یک ویرایشگر آنلاین همچون Codepad استفاده کنید. با این کار نیاز ندارید نرم افزارهای مربوطه را بر روی کامپیوتر خود نصب کنید.
به صورت خلاصه باید بگویم Sass یک پیش پردازنده برای زبان css است. پیش پردازنده ها به ما کمک می کنند از ویژگی های منحصر به فردی در css استفاده کنیم. یک پیش پردازنده زبانی اسکریپتی بوده که به توسعه دهندگان اجازه می دهد کدها را به آن زبان نوشته و سپس به صورت css از آن خروجی بگیرند.
اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید.
چیزی که برای ورود به این دنیای جذاب نیاز دارید این است که درک کاملی از موارد پایه ای و کدهای css داشته باشید. Sass یکی از محبوب‌ترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less و Stylus وجود دارند.
در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.
دو قاعده نوشتاری و یا سینتکس برای Sass وجود دارد که هر دو در نهایت خروجی یکسانی را برای ما تولید می‌کنند
SCSS : استفاده از فایلی که دارای فرمت scss. است و با css هم بسیار سازگار است.
SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریعتر نوشته میشود.
متغیرها بسیار قدرتمند هستند. زیرا آنها به شما اجازه می‌دهند کد خود را سریع تغییر دهید. وقتی متغیری را تعریف می‌کنید، مقداری مشخص را در آن ذخیره می‌کنید.
مقادیر مجاز برای متغیرها عبارتند از : اعداد، رشته‌ها، رنگها
$blue: #3498db;
$red: #e74c3c;
$background: #34495e;
body { background-color: $background; }
h1 { color: $blue; }
p { color: $red; }
Sass به شما اجازه می دهد از قواعد css برای تو در تویی استفاده کنید تو در تویی یک روش فوق العاده برای سازماندهی و ساختار دهی کدهای css است و به شما اجازه می دهد از تکرارهای غیرضروری پرهیز کنید.
ul {
list-style: none;
li {
padding: 10px;
display: inline-block;
a {
text-decoration: none;
font-size: 16px;
color: #333;
}
وراثت یکی از مفیدترین ویژگی های Sass است. با استفاده از گسترش پذیری می توانیم مجموعه ای از مشخصه های css را از یکی به دیگری منتقل کنیم. گسترش پذیری زمانی استفاده میشود که چندین عنصر دارای اشتراکاتی در مشخصه های css باشند. استفاده از گسترش پذیری به شدت در نوشتن کد های تکراری صرفه‌جویی می‌کند
$white: #fff;
.btn {
padding: 6px 12px;
font-size: 14px;
text-align: center;
border-radius: 4px;
color: $white;
.btn-primary {
@extend .btn;
background-color: $blue;
.btn-secondary {
background-color: $red;
Mixins ها یکی دیگر از ویژگی‌های فوق‌العاده Sass هستند. به صورت پایه ای یک Mixins به شما اجازه می دهد تعاریفی از سی اس اس را که می خواهید از آنها در وبسایتتان استفاده مجدد انجام دهید، گروه‌بندی کنید. ما مقادیر را به صورت آرگومان ارسال می‌کنیم.
این کار باعث میشود Mixins ها قابلیت انعطاف بیشتری داشته باشند. Sass از دستور mixin@ برای تعریف Mixins ها استفاده کرده و از دستور include@ برای استفاده از آنها در برنامه بهره می‌برید.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
@include border-radius(4px);