آموزش Sass به همراه مثال (قسمت دوم)

تو این پارت قراره نحوه استفاده کردن از sass رو بهتون آموزش بدم:

تو در تویی (Nesting)

همونطور که میدونید ما توی css وقتی میخوایم استایل دهی کنیم یک id یا class یا تگ رو انتخاب میکنیم و توی بلوک خودش بهش استایل میدیم ولی در sass ما میتونیم بصورت تو در تو استایل بدیم که توی کد زیر نشونتون میدم باید چیکار کنید:

.items { 
    display: flex;       
    flex-wrap: wrap;

    .item { 
       font-size:
     }
}

تو این مثال کلاس items استایل هاشو گرفته و کلاس item که داخل کلاس items بصورت child وجود داره nested شده و استایل های ما روش اعمال میشه

وقتی بخوایم از سودو المنت ها در sass استفاده کنیم باید بصورت زیر عمل کنیم:

.item {      
    background-color: red;   
   
    &:hover {         
      background-color: green;      
     } 
}

تو این مثال گفتم وقتی item:hover شد رنگ پس زمینه سبز بشه

ایجاد متغیر  (Variables)

با استفاده از متغیر شما می‌توانید مقداری را ذخیره کرده و بعدا بارها از آن در مکان‌های مختلف استفاده کنید، برای تعریف کردن متغیر در sass باید در ابتدای نام متغیر سیمبل $ رو قرار داده و بعدش اسم متغیر رو مینویسیم، به مثال زیر توجه کنید:

$primary-color: red;
$my-font-size: 20px;

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

background-color: $primary-color;
font-size: $my-font-size;

اینجا رنگ بکگراند قرمز میشه و سایز فونتمون 20 پیکسل قرار میگیره

میکسین (Mixin)

خیلی از قطعه کدها در css در مکان‌های مختلفی تکرار می‌شوند و هیچ راهی برای جلوگیری از تکرار آنها نداریم. اما در Sass این مشکل به کمک mixin حل شده، با استفاده از mixin می‌توان یک الگو ایجاد کرده و از آن الگو چندین در برنامه استفاده کرد، نحوه تعریف از mixin توی sass بصورت زیره:

@mixin flexLayout {
    display: flex;
    justify-content: center;
    align-items: center;
 }

اینجا گفتیم ما یه mixin داریم به اسم flexLayout که استایل های توش با هم یه جا نوشته شدن

حالا اگه بخوای از mixin بالا استفاده کنیم باید کد زیر رو بنویسیم:

.logo { 
      @include flexLayout;
  }

در این مرحله گفتیم کلاس logo شامل mixin ای به اسم flexLayout باشه، اینجوری ما بجای اینکه 3 تا استایل مختلف رو توی کلاس logo بنویسیم یک بار از mixin اون استفاده میکنیم و کاملا قابلیت اینو داره که چنیدن بار استفاده بشه

امیدوارم این قسمت هم مورد استفادتون قرار گرفته باشه