خلاصه مطالب sass

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 انجام می‌شود.