آموزش کامل sass

sass چیست ؟

Sass مخفف عبارت Syntactically Awesome Stylesheet هست که یک پیش پردازنده رایگان و محبوب برای css است ، در سال 2006 توسعه یافته و با استفاده از ویژگی های آن می توان کد های css را سریع تر ایجاد کرد و کارایی آن را بهبود بخشید ، در ادامه با برخی از ویژگی های sass به صورت خلاصه آشنا می شویم :

سازگاری با CSS

Sass با تمام نسخه های CSS سازگار است به طوری که شما می توانید به طور یکپارچه از هر کتابخانه CSS موجود استفاده کنید.

بهترین افزودنی برای CSS

بارها و بارها ، Sass به عنوان بهترین پیش پردازنده برای CSS انتخاب شده است.

ویژگی های بسیار

Sass دارای ویژگی ها و توانایی های بیشتری نسبت به هر پیش پردازنده برای CSS است .

توسعه و پشتیبانی

Sass بطور پیوسته توسط صدها توسعه دهنده پشتیبانی و توسعه می یابد.

سابقه

Sass تقریباً 16 سال است که به طور فعال پشتیبانی می شود.

فریمورک ها

تعداد بسیار زیادی از فریمورک ها با Sass ساخته شده اند.

راه های نصب و راه اندازی sass

برای یادگیری روش های مختلف نصب و راه اندازی sass می توانید مقاله ی آموزش نصب ، راه اندازی و کامپایل sass را مطالعه کنید.

تفاوت پسوند sass با scss

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

این فایل ها با پسوند scss ایجاد شده اند :

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

و این فایل ها با پسوند sass :

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;
}

همانطور که مشخص است استفاده از سینتکس scss بهتر و راحت تر از استفاده از پسوند sass است زیرا کد های که با پسوند scss ایجاد می کنیم به سینتکس css نزدیک تر است و کار با آن بسیار ساده تر است.

Variables در sass

متغیر ها یا Variables مانند کوله پشتی هستند که اطلاعات ما درون آن قرار می گیرد و در هنگام نیاز می توانیم چندین و چند بار از آنها استفاده کنیم به صورت خلاصه می توان گفت از متغیر ها برای ذخیره داده ها استفاده می شود.

ابتدا با متغییر ها در css آشنا شویم :

در css برای تعریف متغیر ها یک root ایجاد میکردیم و از تابع var برای صدا زدن آنها استفاده میکردیم مانند مثال زیر :

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

نحوه ی ساخت متغیر ها در sass

برای ساخت متغیر ها در sass ابتدا از علامت $ استفاده میکنیم و پس از آن نام متغیر دلخواه و سپس مقدار متغیر قرار میگیرد :

$variablename: value;

مثال:

$primary:#326ede;
$info:#f6c31b;
$secondary:#1ac777;

روشی دیگر برای تعریف متغیر ها در sass

نوع دیگر از نوشتن متغیر ها در Sass به شکل زیر است در این مثال ما می توانیم یک پالت رنگ ایجاد کنیم و با استفاده از توابع موجود در Sass از آنها استفاده کنیم.

$colors:(
    "red":#e61919,
    "green":#19e635,
    "black":black,
    "primary":$primary,
    "info":$info,
    "secondary":$secondary
)

انواع حوزه در sass

متغیر ها در sass بسته به حوزه ای که تعریف میشوند امکان استفاده دارند اگر متغیری به صورت سراسری تعریف شود همه جای برنامه قابل دسترسی است ولی اگر دورن { } (کولی بریس) تعریف شود فقط همان قسمت قابل دسترسی است و به اصطلاح حوزه محلی دارد.

مثال :

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

با استفاده از global! در Sass می توانیم متغیر های محلی را به صورت سراسری داشته باشیم.

انواع داده در sass

انواع داده ها در sass شامل موارد زیر است :

رشته

عدد

رنگ

مقادیر منطقی

لیست ها

null

Partials & @import در Sass

برای کنترل بهتر بر روی کد های css ما می توانیم کد های خود را دسته بندی کنیم و هر کدام را در فایل های جداگانه قرار دهیم و در موقع نیاز آنها را import کنیم.

برای اینکار با توجه به اینکه به صورت پیش فرض Sass همه فایل های با پیشوند scss. را مستقیما ترانسپایل می کند و ما قصد نداریم فایل های که دسته بندی یا به اصلاح Partials کردیم ترنسپایل بشوند اگر نام فایل را با یک آندرلاین (_) آغاز کنیم ، Sass آن فایل را نادیده میگیرد و یا به عبارتی Transpile نمی کند ، و به راحتی میتوانیم در قسمت دلخواه فایل مورد نظر را import کنیم.

دستورات تو در تو یا nested در Sass

برای اینکه خوانایی کد های ما افزایش یابد می توانیم از خاصیت nested یا تو در تو در Sass استفاده کنیم به مثال زیر توجه کنید :

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

یکی از بهترین ویژگی های nested جلو گیری از نوشتن کد های تکراری است مبه مثال زیر توجه کنید :

کد ها در فایل sass :

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
} 

خروجی کد ها در css :

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

استفاده از سلکتور ها در sass

برای مثال فرض کنید برای المنتی قصد دارید یک hover ایجاد کنید برای این اگر به صورت زیر عمل کنیم با خطا موجه می شویم :

.btn{
border-radius:math.div($border,2);
:hover{
    background-color: #ffc0cb
}
}

کد های css

.btn :hover {
  background-color: #ffc0cb;
}

دلیل این خطا وجود فاصله در خروجی است برای رفع این مشکل از علامت & (امپر ساین) استفاده می کنیم :

.btn{
border-radius:math.div($border,2);
    &:hover{
    background-color: #ffc0cb
}
}

کد های css

.btn:hover {
  background-color: #ffc0cb;
}

همانطور که مشاهده می کنید فاصله ای که باعث خطا شده بود دیگر وجود ندارد.

استفاده از تابع Math

فرض کنید متغیری به این صورت تعریف کرده ایم :

$border:20px; 

و میخواهیم از توابع ریاضی برای border خود استفاده کنیم

مثال :

برای این کار اگر به صورت زیر عمل کنیم هنگام کمپایل کردن فایل ها به مشکل می خوریم

.btn{
    border-radius:$border/4;
}

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

@use 'sass:math';

و پس از آن

ازتابع :math استفاده می کنیم

.btn{
border-radius:math.div($border,4);
}

بعضی از توابع ریاضی پرکاربرد در sass

بعد از قرار دادن @use 'sass:math'; در بالای فایل خود می توانیم از توابع ریاضی مانند زیر استفاده کنیم:

border-radius:math.floor(2.6);

که عدد را به سمت پایین گرد میکند

border-radius:math.max(1px,20px,15px);

بیشترین مقدار را بر میگرداند.

border-radius:math.div(10,2);

عدد اول را بر عدد دوم تقسیم می کند

استفاده از debug در sass

برای اینکار از @debug استفاده می کنیم و به راحتی خروجی خود را بدون کمپایل شدن می توانیم در کنسول sass مشاهده کنیم مانند مثال زیر :

@debug math.div(2,4);

@debug math.floor(2.6);

استفاده از تابع map-get

ما می توانیم با استفاده از ویژگی های این تابع به راحتی کنترل بهتری بر روی متغیر های خود داشته باشیم.

به مثال زیر توجه کنید :

سینتکس کلی آن به صورت زیر است :

map-get($map: , $key: )

با استفاده از متغیر colors که قبل تر ایجاد کردیم مثال های زیر را داریم :

@debug map-get($colors ,"red" );
@debug map-has-key($colors ,"red" );
@debug map-remove($colors ,"red" );
@debug map-merge($colors  ,("pink":#ffc0cb) );
@debug map-keys($colors);
@debug map-values($colors);

مثال :

body{
    background-color: map-get($colors, "pink" );
}

استفاده از حلقه ها در sass

برای این کار ما از @each استفاده می کنیم که سینتکس آن به صورت زیر است:

@each $var in list {

}

در مثال قبلی ما پالت رنگ $colors را ایجاد کردیم در اینجا باستفاده از حلقه ها از پالت رنگ خود استفاده می کنیم :

@each $key, $val in $colors {
    .text-#{$key}{
        color: $val;
    }
    bg-#{$key}{
        background-color: $val;
    }
}

اگر به کد های css خود نگاه کنیم میبینم که به تعداد $key, $val ها در متغیر $colors ما بک گراند ها و text color های مختلفی داریم.

استفاده از حلقه for

سینکس آن به این صورت است

@for $var from start to end {

    }

مثال قبل را درنظر بگیرید :

@each $key, $val in $colors {
    .text-#{$key}{
        color: $val;
    }
    bg-#{$key}{
        background-color: $val;
    }

    @for $i from 1 to 9 {
        .text-#{$key}-light-#{$i}{
            color: mix(white,$val,$i*10);
        }
        .bg-#{$key}-light-#{$i}{
            background-color: mix(white,$val,$i*10);
        }
    }
}

با ایجاد این حلقه for ما از عدد 1 تا 9 در متغیر colors پیمایش می کنیم و کلاس های رنگی خود را درون css به وجود می آوریم.

برای انجام تمرین شما می توانید همن کار را برای رنگ دارک انجام دهید.

ایجاد شرط با استفاده از دستور if , else

کار با if بسیار ساده است برای این کار از سینتکس زیر استفاده می کنیم :

@if expr {

}

در این مثال می گوییم اگر شرط برقرار بود این کلاس درون css ایجاد شود :

@if (2>1) {
    .text-if{
        color: black;
    }
}@else{
    .text-if-else{
        color: white;
    }
}

mixin@ و include@ در Sass

یکی از ویژگی های یک برنامه نویس خوب جلو گیری از نوشتن کد های تکراری است در Sass ما با استفاده از mixin ها کد های که قرار است چندین بار از آنها استفاده کنیم را یک ببار می نویسم و با استفاده از include آنهارا در هرکجای از کدها که نیاز بود وارد میکنیم.

کد زیر را در نظر بگیرید :

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

که فایل css آن به صورت زیر می شود:

CSS OUTPUT
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

همانطور که مشاهده میکنید ورودی mixin ما میتواند متغیر هایی دلخواه باشد

Functions ها در sass

با استفاده از توابع می تونیم عملیات های پیچیده را خیلی بهتر کنترل کنیم و با یک بار کد نویسی چندین و چند بار از این کد استفاده کنیم.

مثال :

@function pow($base, $exponent) {
    $result: 1;
    @for $_ from 1 through $exponent {
      $result: $result * $base;
    }
    @return $result;
  }

  .sidebar {
    float: left;
    margin-left: pow(4, 3) * 1px;
  }

Extend در sass

به کد زیر دقت کنید

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

که خروجی آن در css به صورت زیر می شود

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

همانطور که مشاهده کردید ما با استفاده از این قابلیت کد هایی که در سایر کد ها مشترک بود را یک جا قرار دادیم و با استفاده از @extend کد های خود را جایگذاری کردیم با استفاده از % به جای نقطه باعث شد تا هنگام کمپایل کردن کدها کدهای تکراری کمپایل نشود.

همچنین شما می توانید در دوره ی آموزش رایگان sass شرکت کنید و به صورت رایگان با استفاده از ویدیو های آموزشی به یادگیری sass بپردازید.