Sass

ء Sass پیش پردازنده CSS !

ء Sass به ما کمک می‌کند تا بتوانیم از ویژگی‌های منحصر به فرد CSS استفاده کنیم مانند :
متغیرها، برنامه نویسی تو در تو و موارد دیگر.
هدف استفاده از Sass برای برنامه نویسی ساده و بهتر است.

پیش‌پردازنده CSS

یک زبان اسکریپتی که به توسعه‌دهندگان اجازه نوشتن کد در یک زبان و کامپایل آن به صورت CSS را داده و و باعث توسعه راحت تر CSS می‌شود.
Sass یکی از محبوب‌ترین پیش‌پردازنده موجود است اما موارد دیگری مانند Less و Stylus نیز وجود دارند.

پس Sass چیه؟

پیش‌پردازنده ایی است که به CSS توانایی استفاده از ویژگی هایی مانند متغیرها، تو در تو نویسی، inline import و ... را میدهد.
در واقع Sass مانند یک اکستنشن برای CSS می باشد وکمک می‌کند که
همه چیز را مرتب شده نگه داری کنیم و فایل‌های استایل‌شیت را سریع تر ایجاد کنیم .
Sass با تمام نسخه‌های CSS سازگاری دارد.
برای نصب Sass میتوانید از http://sass-lang.com استفاده کنید.

سینتکس و نحوه استفاده از Sass:

دارای دو سینتکس است

۱. SCSS یا همان (Sassy CSS) :
استفاده از فایل با فرمت .scss که با سینتکس CSS سازگاری خوبی دارد.

۲.دندانه‌دار (همان Sass) :
استفاده از فرمت .sass که به صورت دندانه‌ای است و با CSS سازگاری دارد و نوشتن آن سریع‌تر است. 

می توان هر دو سینتکس را با استفاده از sass-convert به هم تبدیل کرد.

متغیر :

به شما اجازه تعریف متغیر و قرار دادن اطلاعات را در آن‌ها می دهد.
این ویژگی اجازه میدهد که بتوانید به سرعت تنها با تغییر یک قسمت از متغیر در جاهای مختلف از آن استفاده کنید.

مثال :

$font-stack:    Helvetica, sans-serif;
$primary-color: #ffff;

body {   
       font: 100% $font-stack; 
       color: $primary-color;
        }

تبدیل به CSS :

body {   
     font: 100% Helvetica, sans-serif;
     color: #ffff; 
     }

تودرتو نویسی :

این ویژگی توانایی نوشتن سلکتورهای CSS را به صورتی که بسیار به سیستم سلسله مراتبی HTML شبیه باشد به شما می دهد. 

مثال :

nav {
   ul {
        margin: 0;
        padding: 0;
        list-style: none;
     }
     li { display: inline-block; }
     a {
          display: block;     
          padding: 6px 12px;     
          text-decoration: none;   
          }
    }

تبدیل به CSS :

nav ul {
   margin: 0;   
   padding: 0;   
   list-style: none;
}
     
nav li {
   display: inline-block;
}  

nav a {   
display: block;   
padding: 6px 12px;   
text-decoration: none; 
}

ءPartial :

فایل های کوچک Sass هستند که قابلیت import شدن در فایل‌های دیگر Sass را فراهم می‌کنند و
با استفاده از این ویژگی می‌توانید CSS ماژولاری داشته باشید که نگه‌داری و دیباگ‌ کردن آن‌ها راحت تر است. نام گذاری Partial به این صورت است :
_partial.scss

ارث‌بری :

از @extend فقط یک بار در فایل Sass استفاده می‌شود.
این قابلیت این است که بتوانید از استایل مربوط به سلکتورهای دیگری ارث‌بری کنید و هر جایی که احتیاج به موارد دیگر بود می‌توانید به سادگی آن را توسعه دهید.

عملگر :

برای مثال شما می‌توانید با این قابلیت مقادیر پیکسل را به درصد تبدیل کنید.
در این حالت به توابع استاندارد ریاضی مانند جمع، تفریق، ضرب و تقسیم دسترسی دارید که
البته باید گفت که این توابع قابلیت ترکیب شدن با هم و ایجاد محاسبات پیچیده‌تر را نیز دارند. 
در کنار تمام این موارد Sass توابع داخلی دیگری دارد که در کار با اعداد به شما کمک می‌کند.

ایمپورت :‌

با استفاده از دستور @import می‌توان Partial هایی که در بالا گفته شدند را به کدها اضافه کرد.
که با استفاده از Http Request انجام می‌شود.