SASS nədir? Quraşdırma və istifadə qaydaları

Mr_iLQaR

SASS nədir?

SASS veb səhifəni tərtib edərkən CSS-də tapılmayan funksiyalardan istifadə etməyə imkan verən CSS tərtibçisidir.

CSS3 ilə istifadə edilən CSS xüsusiyyətləri xeyli artmışdır.

Prefikslərlə işləyən bəzi funksiyalar, irimiqyaslı layihələrdə uzun CSS kodlarının yazılması, CSS-də bəzi hesablamaların aparılması zərurəti və eyni CSS xüsusiyyətlərinin təkrar-təkrar yazılması kimi problemlər ortaya çıxırdı.

SASS bu problemləri minimuma endirmək üçün hazırlanmış bir CSS kompilyatorudur.

SASS sizə aşağıdakı funksiyalardan istifadə edərək planlı, praktik və sürətli CSS yazmağa imkan verir.

Dəyişən – variables
İç-içə seçicilərdən istifadə – nesting
Hissələrə ayırma – partials
CSS daxil etmə – import
Funksiyalar – function, mixin
Miras – inheritance
Operatorlar – operators
İlmələr – for, each, while
Qərar strukturları – if, else

SCSS nədir?

SASS yazı üslubu proqramlaşdırma dillərinə daha yaxındır.

SCSS, CSS-də istifadə olunan qıvrımlı mötərizələr və nöqtəli vergüllər əlavə edilmiş SASS dilinin versiyasıdır.

SASS istifadəsi aşağıdakı kimidir.

$font-family:    Helvetica, sans-serif
$primary-color: crimson

body
  font: 100% $font-family
  background-color: $primary-color

SASS fayl uzantısı .sass ilə bitir.
SCSS istifadəsi aşağıdakı kimidir.

$font-family:    Helvetica, sans-serif;
$primary-color: crimson;

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

SCSS fayl uzantısı .scss ilə bitir.

SASS quraşdırılması

SASS kompilyatoru Ruby ilə işləndiyi üçün ondan istifadə etmək üçün Ruby-ni kompüterimizə quraşdırmalıyıq.

Ruby quraşdırılması üçün tələb olunan quraşdırma faylını http://rubyinstaller.org saytından yükləyə bilərsiniz.

SASS quraşdırılması

SASS-ı Windows əməliyyat sistemində quraşdırmaq üçün Başlat Menyusunda Ruby qısayolları olan qovluqda “Start Command Prompt with Ruby” ilə əmr sətirini işə salın.

Ekranda görünən əmr pəncərəsində;
gem install sass
Komandanı yazıb işə saldığınız zaman SASS quraşdırılacaq.

SASS-ı uğurla quraşdırdıqdan sonra əmr pəncərəsində aşağıdakı əmri yazaraq quraşdırmanı yoxlaya bilərsiniz.
sass -v

SASS istifadəsi

SASS kodlarını yazdıqdan sonra fayl CSS faylına çevrilmək üçün tərtib edilməlidir.

Əvvəlcə aşağıdakı SASS kodlarını codestack.scss olaraq yadda saxlayaq.

$font-family:    Helvetica, sans-serif;
$primary-color: crimson;

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

Sonra, əmr sətirində saxladığımız qovluq yolunu göstərək.

Məsələn, faylı CODESTACK qovluğunda C: bölməsi altında saxlamısınızsa, əmr sətirində aşağıdakı əmri yazmaq kifayət edəcəkdir.
cd c:\CODESTACK
Əgər əmr sorğusu işlədiyimiz qovluğu göstərirsə, sadəcə olaraq aşağıdakı əmri yazın.
sass codestack.scss:codestack.css
Komandadan sonra SASS bizə yazılan SASS kodlarını CSS kodlarına çevirəcək və codestack.css adı altında eyni qovluqda saxlayacaq.

Ancaq bunu hər dəfə təkrarlamaq vaxt aparacaq.

Dəyişikliklər edildikdə tərtib etmək üçün –watch parametrini əlavə etməliyik.
sass --watch CODESTACK.scss:CODESTACK.css
Nə qədər ki, komanda pəncərəsi açıqdır, faylda dəyişikliklər edildikdə o, SASS fayllarını tərtib edəcək.

O, tərtib prosesi zamanı SASS keş faylı və qovluğunu yaradır.

Keş faylları və qovluqların yaradılmasını söndürmək üçün –no-cache parametrini əlavə etmək kifayətdir.
sass --no-cache --watch CODESTACK.scss:CODESTACK.css
SASS ümumiyyətlə irimiqyaslı layihələrdə istifadə edildiyindən, SASS faylları ayrı-ayrı qovluqda ayrıca CSS fayllarında saxlanılır və qovluqdakı çoxsaylı SASS faylları tərtib edilir.

Bunu etmək üçün, layihə qovluğunda SCSS adlı bir qovluğu açın, SASS fayllarınızı ora qoyun, sonra aşağıdakı əmr satırını işə salın.
sass --no-cache --watch SCSS:CSS
Yazılı SASS faylları tərtib olunacaq və CSS adlı qovluğa kopyalanacaq.

SASS faylları tərtib edildikdən sonra o, map faylı yaradır. Onu söndürmək üçün –source-map=none parametrini əlavə etmək kifayətdir.
sass --no-cache --watch --sourcemap=none SCSS:CSS
SASS fayllarını tərtib etdikdən sonra hazırlanmış CSS faylının sıxılmış və ya fərqli formatda çıxmasını istəyirsinizsə, biz -style dəyərinə nested (defolt), compact, compressed və ya expanded dəyərlərini verə bilərik.
sass --no-cache --watch --sourcemap=none --style=compressed SCSS:CSS

İndi tərtib edilmiş SASS faylları sıxılmış CSS formatında saxlanacaq.

Digər parametrlər haqqında məlumat əldə etmək üçün əmr satırına aşağıdakı əmri yazmaq kifayətdir.
sass --help
Bunlar SASS istifadəsində və tərtibində ən çox istifadə olunan parametrlərdir.

SASS Dəyişənləri

SASS ilə CSS faylları yaradarkən ən çox istifadə edilən xüsusiyyətlərdən biri, şübhəsiz ki, dəyişənlərdir.

CSS yazarkən bəzən dizayn etdiyimiz veb səhifədəki rəng, en və şrift kimi dəyərləri dəyişməli oluruq.

Bununla belə, bu dəyişiklik uzun CSS kodları arasında zəhmət tələb edir və vaxt aparır.

SASS ilə dəyişənlərdən istifadə edərək asanlıqla və tez dəyişikliklər edə bilərik.

SASS dəyişənini təyin edərkən, dəyişənin qarşısına dollar işarəsi ($) əlavə edilir.

SASS dəyişən tərifi nümunələri;
$bg-color: seagreen;
Genişlik tərifi
$box-size: 10px;
Şrift növünün tərifi
$default-font: arial, verdana;
İstifadəsi

$bg-color: seagreen;
$default-font: arial, verdana;

body {
	background-color: $bg-color;
	font-family: $default-font;
}

SASS İç İçə Seçicilərdən istifadə

CSS ilə seçim edərkən, daha çox alt element seçildikcə kodlaşdırma daha uzun və mürəkkəb olur.

Misal üçün; Gəlin tərtib etdiyimiz veb-səhifədə aşağıdakı kimi menyu tərtibatı edək.

<nav>
  <ul>
    <li><a href="#">Əsas səhifə</a></li>
    <li><a href="#">Haqqımızda</a></li>
    <li><a href="#">Bizimlə əlaqə</a></li>
  </ul>
</nav>

Menyuya CSS tətbiq etmək üçün aşağıdakı kimi uzun selektor yazmalıyıq.

body {
  font-family: arial, verdana;
}

nav ul {
  background: #2c3e50;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: #ffffff;
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
}

SASS iç içə seçicilərdən istifadə etməklə bu prosesi aşağıdakı kimi qısalda bilərik.

$menu-bg-color: #2c3e50;
$menu-text-color: #ffffff;
$default-font: arial, verdana;

body {
  font-family: $default-font;
}

nav {
  ul {
    background: $menu-bg-color;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        color: $menu-text-color;
        display: inline-block;
        padding: 10px 16px;
        text-decoration: none;
      }
    }
  }
}

QEYD: Nəzərə alın ki, dəyişənlərin istifadəsi sayəsində menyu rənglərini asanlıqla dəyişə bilərik.

CSS element siniflərinin həyata keçirilməsi

CSS :hover, :active, :focus, :before, :after və s. element sinifləri tətbiq edərkən, element sinfinin tətbiq olunacağı sinfin altında ampersand işarəsini (&) və element sinfi yazmaq kifayət olacaq.

$menu-bg-color: #2c3e50;
$menu-hover-color: #16a085;
$menu-text-color: #ffffff;
$default-font: arial, verdana;

body {
  font-family: $default-font;
}

nav {
  ul {
    background: $menu-bg-color;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        color: $menu-text-color;
        display: inline-block;
        padding: 10px 16px;
        text-decoration: none;
        &:hover {
          background: $menu-hover-color;
        }
      }
    }
  }
}

SASS iç-içə seçicilərdən istifadə daha az kod yazısı və daha oxunaqlı kod tərtibatı ilə nəticələnir.

SASS üslublarının hissələrə bölünməsi

Veb səhifə dizayn edərkən səhifəni yuxarı hissə, məzmun bölməsi, sol və sağ bölmə kimi bölmələrə bölmək və hər bölmə üçün fərqli CSS təyin etmək kodların daha uzun və mürəkkəb olmasına səbəb olur.

SASS və ya SCSS ilə kodlaşdırarkən biz sayt daxilində istifadə olunan menyu, cədvəl, üst hissə, məzmun bölməsi, sol və sağ bölmə kimi bölmələr üçün ayrıca fayl yarada və onları bir faylda birləşdirə bilərik.

SASS üslublarını hissələrə bölmək üçün faylın önünə alt xətt (_) əlavə edilməlidir.

Misal üçün; Gəlin tərtib etdiyimiz veb-səhifədə aşağıdakı kimi menyu tərtibatı edək.

<nav>
  <ul>
    <li><a href="#">Əsas səhifə</a></li>
    <li><a href="#">Haqqımızda</a></li>
    <li><a href="#">Bizimlə əlaqə</a></li>
  </ul>
</nav>

Menyu üçün hazırladığımız SASS faylını menu.scss olaraq qeyd edək.

$menu-bg-color: #2c3e50;
$menu-hover-color: #16a085;
$menu-text-color: #ffffff;

nav {
  ul {
    background: $menu-bg-color;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        color: $menu-text-color;
        display: inline-block;
        padding: 10px 16px;
        text-decoration: none;
        &:hover {
          background: $menu-hover-color;
        }
      }
    }
  }
}

Veb səhifənin fon rəngi, şrift növü və mətn rəngi parametrlərini ehtiva edən SASS faylını _main.scss olaraq saxlayaq.

$bg-color: whitesmoke;
$default-font: arial,verdana;

body {
  background-color: $bg-color;
  font-family: $default-font;
  color: black;
}

Aşağıdakı faylı style.scss olaraq saxlayaq.

@import "main";
@import "menu";

Kompilyasiyadan sonra SASS faylının çıxışı aşağıdakı kimi olacaq.

body {
  background-color: whitesmoke;
  font-family: arial, verdana;
  color: black;
}

nav ul {
  background: #2c3e50;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: #ffffff;
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
}
nav ul li a:hover {
  background: #16a085;
}

Saytda menyuya dəyişiklik etdikdə yalnız menyu təriflərini ehtiva edən SASS faylında dəyişiklik etmək kifayət olacaq.

Mövzu ilə bağlı ətraflı məlumat əldə etmək üçün sizə Bootstrap və ya Foundation kimi CSS çərçivələrinin SASS fayl strukturunu araşdırmanızı tövsiyə edirəm.

SASS-ı miras alır

Veb səhifəni tərtib edərkən hazırladığımız düymələr, menyular və ya keçidlər adətən ümumi xüsusiyyətləri ehtiva edir.

Biz ondan yalnız fon rəngini və ya ölçüsünü dəyişdirməklə istifadə edirik.

SASS ilə biz bir sinifdə ümumi xüsusiyyətləri toplamaq və bu xüsusiyyətləri miras almaqla kodun təkrarını azalda bilərik.

Gəlin veb saytımız üçün bir düymə yaradaq.

<button class="btn-1">Button - 1</button>
<button class="btn-2">Button - 2</button>
<button class="btn-3">Button - 3</button>

Bir sinifdə ümumi xassələri təyin edək.

.btn {
  border: none;
  padding: 10px;
  color: white;
  border-radius: 3px;
  outline: none;
}

Biz @extend ilə digər siniflərdə ümumi xüsusiyyətləri daxil edirik.

.btn-1 {
  @extend .btn;
  background-color: darkslategrey;
}

.btn-2 {
  @extend .btn;
  background-color: seagreen;
}

.btn-3 {
  @extend .btn;
  background-color: salmon;
}

İştirakla ümumi funksiyalardan istifadə kodun təkrarlanmasını azaldır.

SASS Mixin

Bəzi brauzerlərdə CSS3 xüsusiyyətlərini prefikslə istifadə etmək zəhmətli və uzun CSS kodlarının yazılması ilə nəticələnir.

Müxtəlif brauzer prefikslərinin təkrar istifadəsini azaltmaq üçün SASS @mixin funksiyasından istifadə edə bilərik.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Yaratdığımız mixini istifadə etmək üçün onu @include ilə sinfimizə daxil edirik.
.Schwarz { @include border-radius(10px); }
CSS3 linear-gradient xassə qarışığının nümunəsi aşağıda verilmişdir.

@mixin linearGradient($top, $bottom) {
    background: $top;
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

Mixin üçün tələb olunan parametrləri misalda yazdıqdan sonra ondan istifadə edə bilərik.
.Schwarz { @include linearGradient(#cccccc, #666666); }
Prefikslə dəstəklənən xüsusiyyətlər üçün mixin təyin etdikdən sonra ondan istədiyimiz qədər istifadə edə bilərik.

SASS Operatorları

Veb səhifədə bölmələr yerləşdirərkən müxtəlif zəhmətli və uzunmüddətli hesablamalar aparırıq.

SASS ilə hesablamalar üçün +, -, *, / və % operatorlarından istifadə edə bilərik.

SASS operatorlarından istifadə edərək biz rəqəmsal dəyərlərlə yanaşı, rəng dəyərləri üzərində də işləyə bilərik.

Misal üçün; Səhifəmizdə 3 qutu modeli olsun.

<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
<div class="box-3">box-3</div>

Bir sinifdəki qutuların ümumi xüsusiyyətlərini təyin edək və onları SASS @extend ilə miras alaraq digər siniflərə tətbiq edək.

Daxili məkan və fonda operatorlardan istifadə edərək müxtəlif hesablamalar aparaq.

$box-padding: 50px;
$box-color: crimson;

.box {
  display: inline-block;
  color: white;
}

.box-1 {
  @extend .box;
  padding: $box-padding;
  background-color: $box-color;
}

.box-2 {
  @extend .box;
  padding: $box-padding+30;
  background-color: $box-color*2;
}

.box-3 {
  @extend .box;
  padding: $box-padding*2;
  background-color: $box-color/2;
}

Rənglərdə operatorlardan istifadə edərkən rəngin bölünməsi daha tünd rəngə, rəngin çoxaldılması isə daha açıq rəngə səbəb olacaq.

Sizlərə xoş gün arzulayıram.

E10000

😍 Təşəkkür məlumat üçün

Mr_iLQaR

E10000 Buyurun xoşdur )

Murad

chox sagolun 👍️

Mr_iLQaR

Murad dəyməz ))