Sass : Syntactically Awesome Style Sheets 

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

نکته : ما باید بیایم و کد‌های sass امون رو کامپایل کنیم به css  که برای این کار میتوانیم 2 تا کار رو انجام بدهیم یا بیایم و از پلاگین‌های vscode  استفاده کنیم که محبوب‌ترین اشون live sass compile  هستش و راه دومی استفاده از پکیج منجیر‌ها مثل gulp یا webpack  هستش که بیایم و از اونا استفاده بکنیم 

و یادمان باشد که باید ادرس فایل‌های css که کامپایل شده رو به ht

نکته : برتری sass به نسبت رقیب اش less در این است که برای توسعه فایل جانبه ای رو اضافه نمیکند 

Futures Sass   :

1-Variable-7       Nesting -6       Mixin -5       Extend-4      Import  -3    Conditional-statement -2       loops 

Sass دارای دو گزینه سینتکس است:

1-  ( SCSS ( Sassy CSS : استفاده از فایل با فرمت .scss که سازگاری بالایی با سینتکس CSS دارد.

2 - دندانه‌دار (همان Sass) : از فرمت .sass استفاده می‌کند و به صورت دندانه‌ای است -برخلاف حالت }{-. این مورد نیز به با CSS سازگاری دارد و نوشتن آن سریع‌تر است. 

توضیح هات پیرامون امکانات sass 

1- variables : به ما این اجازه رو میدهد تا مثل دیگر زبان‌های برنامه نویسی بتوانیم یک متغیر رو تعریف کنیم که برای تعریف متغیر کافی است از $ کمک بگیریم همچنین ما در آن می‌توانیم متغیر هامون رو به دو صورت سراسری یا گلوبال و محلی تعریف کنیم که برای سراسری کافی است که در root  پروژه اون هارو تعریف کنیم و برای محلی در { } استایل دهی هامون همچنین با دادن یک global! میتوانیم بیایم و متغیر‌های محلی امون رو به سراسری تبدیل بکنیم 

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
$color : blue ;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

a {
 $color : red !global ;  که در این جا این مقدار دیگه جایگزین می‌شود
 color : $color
  }

2- nesting : ما برای تو در تو نویسی مشابه به css  میایم و استفاده میکنیم ولی شیوه کار با تودرتو نویسی در css تفاوت دارد و دو مدل تو در تو نویسی داریم یکی برای کلاس‌ها یا تگ هامون یکی هم برای پراپرتی هامون یا سودوالمنت هامون

تو در تو نویسی برای تگ ها

nav {  style nav
  ul {
       style nav ul
    li {
         style nav ul  li
        a {
               style nav ul li a
               } 
                  }
                     } 
                        }

حال برای تو در نویسی برای پراپرتی هامون هم بکه دارای پیشوند مشترک هستند پسوند‌های متفاوت به شیوه ی زیر استفاده میکنیم

a {
 &:hover{ }
 &::after {}
  font:{
    size : 17px;
    weight : 600px
     }

3- mixin : برای موقعی هستش که میخاهیم تعدادی از پراپرتی‌های مشابه رو برای المان‌های مختلف در نظر بگیریم که ما در داخل css و  حتی ساختار bootstrap برای بهینه‌تر شدن کدهامون میومدیم و یک کلاس واحد تعریف میکردیم و استایل‌های مشترک رو درون آن قرار میدادیم و در نهایت هم میومدیم و یک کلاس متفاوت تعریف میکردیم  و اون پراپرتی هایی که متفاوت بودن رو درون قرار میدادیم  و دو تا کلاس مربوطه رو به تگ هامون میدادیم

.btn {  fontsize : 16px; ......  padding:4px }
.btn-sucsess {  background-color : green; } و بعد به تگ هامون کلاس‌های بالا رو باهم میدادیم

حال ما در داخل ساختار sass  باید بیایم و پراپرتی هایی که در داخل btn  هستند رو به عنوان یک mixin  در نظر بگیریم و بعد استایل هامون رو بهش میدهیم و در نهایت به کلاس مربوطه میایم اضافه اش میکنیم به شیوه ی زیر  

با استفاده از روش بالا کدهای ما در هر استایل عملا میان و دوباره تولید می‌شوند 

// sass
@mixin  btn {   ....... fonstsize:23px ...........   }                                     
 .btn-sucsess { @include btn ;  background-color : green ;  }           
 حال فقط لازم هستش که بیایم وکلاس btn-sucsess رو بهش بدهیم  
 // css 
 .btn-success {  ... fonstsize:23px ..... background-color : green  }
           

  @mixin flex-center {  display : flex;  align-item:center;  justify-content:center }
 .x {  @include flex-center();  .....  }  

ما در حالت عادی میکسین هامون ساده هستند ولی میتوانیم در آن‌ها از متغیر‌ها نیز  استفاده کنیم بهتر هست در نام گزاری متغیر‌ها اصول کد نویسی تمیز رو رعایت کنیم 

@mixin flex-position ($justify-content : center ,$align-item : center ) {
   dusplay : flex ;
   justify-content : $justify-content ;
   align-item : $align-item ;
   }
.y {
          @include flex-position(space-around,end); 
}

نکته : همچنین mixin‌های ما میتوانند مقادیر پیش فرض بیان و بگیرند و میتوانیم چند mixin رو پشت سر هم قرار دهیم

4- extend : همانطور که در بالا گفته شد mixin‌ها برای پراپرتی‌های تکراری مورد استفاده قرار میگیرد ما از خاصیت برای موقعی استفاده میکنیم که مواردی کلی هستند اما  ما تکرار پراپرتی رو نداریم حال اگر ما یکسری پراپرتی داشتیم که یکبار نوشته می‌شود و خیلی عمومی هستش و جاهای دیگه هم برا ما کاربرد دارد از extend  استفاده میکنیم این دو مفهوم خیلی به هم نزدیک هستند

تفاوت این دو مفهوم در مقدار تولیدی حجم کدهامون هستش که خطوط کد کمتری رو اشغال میکند  

 // sass
 .btn { ....... fontsize:23px ..... }
 .btn-success { @extend .btn;  background-color : green}
 //css
 .btn , .btn-sucess { ....... fontsize:23px .....  }
 .btn-sucsess { background-color : green }

نکته : زمانی که در یک پروژه عناصری داریم که استایل بیشتری دارند و قرار هستش که بعدا یک پراپرتی یا خصیصه اشون تغیر بکند رو با extend استفاده میکنیم ازشون

5- loop : ما می‌توانیم با استفاده از sass بیایم و یک سری حلقه هایی ایجاد کنیم برای کلاس هایی که تقریبا اسامی مشترکی رو دارند برای مثال در کد زیر ما  اومدیم و با استفاده از حلقه‌ها ساختار گرید بندی مون رو بهتری نوشتیم

 $sm-width : 768px;
@media screen and ( max-width : $sm-width ) {
   $sm-class-slug L col-sm;
   @for $i from 1 through 12 {  
     .#{ $sm-class-slug}-#{$i}{ 
        width : 8.3333 * $i
                                }
                                 } 
                                  }

6- Conditional-statement :  استفاده از ساختار‌های شرطی ما با استفاده از if میتوانیم بیایم و برای استایل هامون یکسری ساختار‌های شرطی قرار دهیم

@mixin avatar ($size,#$circle : false ){
  width:$size;
  height : $size
  @if $circle {  border-radius: $size / 2 ;
                 box-shadow : 0 0 10px rgba(0,0,0,.5)  }
                 else {  border-radius : 25px }
  }
  .circle { @include avatar(100px,$circle:false) }

7- pattern‌ها یا import‌ها : Partialها فایل کوچک Sass هستند که قابلیت import شدن در دیگر فایل‌های Sass را مهیا می‌کنند. با استفاده از این حالت شما می‌توانید فایل‌های CSS ماژولاری داشته باشید که نگه‌داری و دیباگ‌ کردن آن‌ها ساده‌تر است. یک Partial به این صورت نام گذاری می‌شود: partial.scss_ بااستفاده از دستور @import می‌توانید Partialهایی که در بالا گفته شد را به کدها اضافه کنیم. این کار با استفاده از یک Http Request انجام می‌شود.