SASS(SCSS) nədir?

SASS nədir?Nə üçün istifadə olunur?Üstünlükləri nələrdir?

Salam,bugünkü məqaləmdə SASS texnologiyası barədə yazacağam.Hazırsınızsa,başlayaq.

SASS nədir?

SASS(Syntactically Awesome Stylesheets — Yazılış cəhətdən möhtəşəm stil səhifələri) texnologiyası ilk dəfə 2006-cı ildə çıxmışdır.Hempton Ketlin tərəfindən dizayn edilmiş bu texnologiyanı Natali Vayzenbaum və Kris Epsteyn kodlamışdır.

Proqramlaşdırma dilləri getdikcə istifadəçinin işini daha çox rahatlatmağa çalışır.CSS-in özünün də istifadəçinin işini yetərincə asanlaşdıracaq sistemi olsa da,proqramçılar bununla kifayətlənməyib bir CSS əsaslı metadil yazmaq istəmişlər.Front-End tərəfində işləyənlər diqqət etmişdirlər ki, bir yerdən sonra CSS kodları təkrar edən formaya dönür, iç-içə olan elementlər üçün seçicilər yazarkən uzun ifadələr yarana bilir,eyni rəng kodunu dəfələrlə kopyalayıb yapışdırmağa məcbur qala bilirik . Hah, SASS tam da bu vəziyyətlər üçün çıxardılmış bir texnologiyadır. Yəni SASS bir CSS pre-kompayleridir . Sizin proqramlama dili məntiqində ve sistemində yazdığınız kodları yığıb CSS kodları halına gətirir.

SASS-ın quraşdırılması

SASS-dan istifadə etməyin fərqli yolları var,mən aşağıda son yenilikləri dəstəklədiyi üçün Dart-sass-in yüklənilməsini göstərəcəyəm.

• Öncə kompüterimizin əməliyyat sisteminə uyğun olaraq “Dart-Sass”-ı yükləyirik.
• Sonra həmin .zip faylını istədiyimiz yerə çıxardırıq.
• Sonra da çıxartdığımız yerin adresini kopyalayırıq :

• Ardından kompüterimizdə aşağıdakı bölməni açırıq :

• Açılan bölmədə “Environment Variables..” hissəsinə giririk :

Açılan bölmədə “New” hissəsinə klikləyirik(Əgər sizdə “PATH” varsa, “Edit”-ə klikləyin)

• Sonra da “Variable name” hissəsinə “PATH” yazıb aşağı sətrə kopyaladığımız ünvanı yapışdırırıq :

Ardından aşağıdakı bölməni açırıq kompüterimizdə :

Sonra da sass --version əmrini girib yüklədiyimizdən əmin oluruq :

İndi isə hansı faylda kod yazacağıqsa,o adresi kopyalayıb önünə cd əlavə edirik,məsələn : cd c:\Medium\intro

intro
   |css
      style.css
   |sass
      style.scss
   index.html

Mənim öz fayl strukturum yuxarıdakı kimidir.Bəs .scss-.css arasındakı canlı bağlantını necə əldə etmək olar?Bunun üçün aşağıdakı kimi yaza bilərik :

sass (sass-ın ünvanı) (css-in ünvanı)//manual dönüşüm
sass --watch (sass-ın ünvanı) (css-in ünvanı)//avtomatik dönüşüm

Əgər .css faylı yoxdursa,ünvana görə özü yaradacaq

Və artıq bu komanda sətri arxa planda açıq olduğu müddətcə dönüşümlər anında olacaq.

Format

İki cür format var :

• expanded
• compressed

Biz canlı dönüşüm edərkən kodlar normal CSS düzülüşündə düzülür və bu “expanded” format sayılır:

Əgər heç bir boşluq olmamasını istəyiriksə, yəni “compressed” format istəyiriksə,bunun üçün aşağıdakı kodu yaza bilərik :

sass --style=compressed sass/style.scss minified-css/style.min.css

Biz “expanded” formatda olan .css faylını olduğu kimi saxlayıb “compressed” formatda yeni bir .css faylı daha yaratdıq(“min” ifadəsi kiçildilmiş(minified) olduğunu bildirmək üçündür)

SASS və SCSS

SASS-ı iki formatda yazmaq mümkündür :

• SASS
• SCSS (Sassy CSS)

Aralarındakı fərq adından göründüyü kimi SCSS-in CSS-ə daha çox bənzəməsidir,yəni SCSS-də {} və ; işarələrinə yer verildiyi halda SASS-da bu mümkün olmur,gəlin,nümunəyə baxaq :

SASS-ın strukturu

SCSS-in strukturu

Nəticədə hər ikisi aşağıdakı kimi CSS koduna dönüşəcək :

Hansı daha yaxşıdır?

Bu sualın cavabı hər kəsə görə dəyişir,əgər bundan əvvəl Java,C,C++ kimi dillərlə daha çox məşğul olmusunuzsa,SCSS formatında yazmaq sizə daha asan gələcəkdir,yox əgər Python üstünlük təşkil edibsə sizdə,SASS daha rahat gələcəkdir.Bu sualın dəqiq cavabı insanın özündən asılıdır,əgər ümumiyyətlə yeni başlamısınızsa,təxmin etmək daha da çətindir.Mənə şaxəli mötərizələr ilə kodu idarə etmək boşluqlarla idarə etməkdən daha asan gəldiyi üçün bu yazıda SCSS formatından istifadə edəcəm.

Kommentlər

CSS-də komment əlavə edərkən təkcə /**/ işarələrindən istifadə edirdik,SCSS-də isə həm də // işarələrindən istifadə etməklə tək sətirlik kommentlər yazmaq olar,bunun yanında CSS-dəki kimi də komment əlavə etmək olar.Sadəcə bunu bilmək lazımdır :

//— Bu işarələrlə yazılan kommentlər .css faylına ötürülmür.Aşağıdakı koda baxaq :

“@charset UTF-8 ” ifadəsi sayəsində biz yazımızda əlifbamızdakı bütün hərflərdən istifadə edə bilirik.

Bir nüansa diqqət edək : /**/ belə komment “compressed” formatda olan .css faylına ötürülmür.Bunun üçün /*!*/ belə yazmaq,yəni kommentin başında nida işarəsi qoymaq lazımdır.

Dəyişənlər

Eyni dəyəri dəfələrlə fərqli yerlərə yazmaq bəzən yorucu olur.SCSS-in də ən böyük üstünlüklərindən biri odur ki,biz bir dəyəri hansısa dəyişənə verib sonra onu dəfələrlə çağıra bilərik,dəyişən təyin etmək üçün $simvolundan istifadə edirik :

İç-içə etiketlər

SCSS sayəsində biz etiketin içindəki etiketlərə də rahatlıqla parametr verə bilirik :

Məsələn,burda “box” sinfinin altındakı “box-item” sinifli etiketlərə çatmaq üçün aşağıdakı kimi kod yazmaq kifayətdir :

Bu belə bir .css faylına dönüşəcək :

& simvolu

Biz əgər bir etiketə “pseudo” siniflər və elementlər vermək istəyiriksə,bunun üçün & simvolundan istifadə edə bilərik :

Təkcə bu işəmi yarayır?Xeyr.Məsələn yuxarıda “.box-item” sinifli etiketi göstərdik.Eyni mötərizənin içində işlətməkdən də doymayan SASS yaradıcıları aşağıda olan koddakı kimi daha qısa yazılışı da SASS-a əlavə etmişlər :

Bu yazılışdan anlayırıq ki,arxa planda baş verənlər kimidir :

& = ".box"
&-item = ".box"+"-item" = ".box-item"

Sizin də ağlınızda “Əgər iç-içə yazılıbsa,deməli yalnız “box” sinfinin içindəki “box-item”-lərə təsir edəcək ” fikri yaranmamış olmaz.O zaman gəlin aşağıdakı koda və onun nəticəsinə baxaq :

Gördüyünüz kimi, həm “box” sinfinin içində, həm də çölündə “box-item” sinifli etiketlər yaratdıq.İndi dizayn hissəsinə baxaq :

İndi isə ən əsas hissəyə gəldik : Nəticə

Burdan anlayırıq ki, & işlədərkən etiketlərin iç-içə və ya eyni səviyyədə olması fərq eləmir.Sadəcə & simvolunu adını ötürmək istədiyimiz sinfin mötərizələri arasında yazırıq.

Bəs biz sadəcə öz etiketinin altında olan etiketlərə təsir etmək istəsək?Bunun üçün #{&} istifadə edə bilərik :

"@" işarəli ifadələr

“@mixin” və “@ include”

Əgər biz bir stil toplusundan dəfələrlə istifadə edəcəyiksə,bunu “@mixin” yardımıyla daha əlverişli hala gətirə bilərik :

“@include” vasitəsiylə də “@mixin”-i işlədə bilirik.SASS-ın bu özəllikləri sayəsində biz təməli hazır alıb üstünə əlavələr edə bilirik.Əgər biz bu özəlliklərin dəyişilməməsini istəyiriksə, özəlliklərin sonunda “!important” ifadəsini işlətməliyik.

Biz “@mixin” funksiyasının içinə dəyişən də göndərə bilirik :

“@extend”

Biz əgər bir dəyişənin özəlliklərini kopyalamaq istəyiriksə,bunun üçün “@extend” funksiyasından istifadə edə bilərik :

Gördüyünüz kimi, .scss faylında başda “h1” etiketinə yazdığımız xüsusiyyətləri “h2” etiketi üçün “@extend” etdikdə .css faylında sanki hər ikisi üçün eyni anda yazmışıq kimi görünür.

“@if” və “@else”

Biz əgər müəyyən şərtə görə bir dizayn vermək istəyiriksə,bunun üçün bu açar sözlər yardımımıza yetir. Sanki “Bu şərt nə ola bilər ki?” dediyinizi eşidirəm.Məsələn, “Flexbox” modelini buna misal göstərə bilərik.Əgər oxumamısınızsa, “Flexbox” barədə olan yazıma bir göz atmağınızı məsləhət görərdim : CSS-də Flexbox modeli

Əgər xəbərdarsınızsa,bilirsiniz ki, “flex-direction : row” halında “justify-content” və “align-items” parametrləri müvafiq olaraq üfüqi və şaquli vəziyyətə nəzarət edir, “flex-direction : column” halında isə bu iki parametrin nəzarət etdikləri ox dəyişilir.Bunları yoxlamaq üçün “@if” və “@else” açar sözləri yardımımıza yetir :

Kodu izah edək :

• Əgər $direction dəyişəni özündə row dəyəri saxlayırsa, o zaman justify-content parametri horizontal(üfüqi), align-items isə vertical(şaquli) vəziyyət üçün istənən dəyəri özünə götürəcək
• @else if sayəsində biz bir şərt ödənmədiyi halda digər bir şərti yoxlamasını istəyə bilirik.Əgər $direction dəyişəni özündə columndəyəri saxlayırsa, o zaman justify-content parametri vertical(şaquli) , align-items isə horizontal(üfüqi) vəziyyət üçün istənən dəyəri özünə götürəcək
• Əgər heç bir şərt ödənməsə,ən sonunda @else hissəsindəki əməliyyatları icra edir,əslində etməsə də olar,çünki display : flex halında əgər müdaxilə olmazsa, onsuz da həmin dəyərlər əməliyyatlar icra olunur

“@function”

Biz ,məsələn,kompleks hesablamalar etmək istəyiriksə,bunu hər dəfə hər parametr üçün yazmaq çətin olacaq.Bu zaman yardımımıza @function özəlliyi yetir :

Məsələn bir elementin içindəki elementlərin bərabər genişlikdə olmasını istəyiriksə,aşağıdakı kimi edə bilərik :

Bu kodda :

• divideEqualPart adında bir funksiya yaratdıq
• Ona $amountOfItem adında bir dəyişən ötürülməsini istədik
• Ardından $widthdəyişəni yaradıb bərabər genişlik üçün 1-i elementlərin sayına bölürük və 100-ə vurub faiz olaraq götürürük
• Ən sonda da @return ilə $width dəyişəninin dəyərini funksiyanı hansı parametr çağırıbsa,ona qaytarırıq

Sizin ağlınızda bir sual yarana bilər ki :

Bütün elementlər üçün margin:0 ikən niyə genişliyi hesablayarkən 0.3% çıxdıq,məgər tam yerləşməli deyildimi?

Çünki display:inline-block halında qutular arasında HTML strukturundakı yazılışlarına görə boşluq yaranır.Bu sualın daha ətraflı cavabı və həlli üçün bu məqaləni oxumağınızı tövsiyə edirəm : The Space Between Inline Block Elements

“@import”

Biz bir başqa .scss faylında etdiyimiz dizaynı çağırmaq və lazım olanda işlətmək istəyiriksə,bunun üçün “@import” funksiyasından istifadə edə bilərik:

_variables.scss burda modul sayılır.Əgər əvvəlində “_” işarəsi olmasaydı,kompayl vaxtı müstəqil bir .css fayl yaradacaqdı.

“@use”

Hazırda Dart-Sass’ın dəstəklədiyi bir açar söz olan @use sayəsində biz başqa bir .scss faylından istədiyimiz dəyərləri götürə bilərik.

Əvvəlcə “_variables.scss” faylında bəzi dizayn kodları yazdıq.İndi onu əsas .scss faylımızda çağıraq :

Gördüyünüz kimi, biz @import da olduğu kimi bir modulu tamamilə yükləmirik.Ehtiyac duyduqca sinfin adıyla çağırıb içindəki dəyişənləri,funksiyaları və s. çağıra bilirik.Bəs mütləq sinfin adıyla çağırmalıyıq?Xeyr,sinfi çağırarkən adını dəyişə bilərik :

Yuxarıdakı kodda faylımodulVar deyə adlandırdıq. Bəs “İş-gücüm var,adla çağırmaq istəmirəm” deyənlər üçün nə edə bilərik?Bunun üçün də aşağıdakı koda baxaq :

Bundan sonra həmin sinfin dəyişənlərini birbaşa çağıra bilərik.

Yeni əlavə olunan “@use” ifadəsi “@import”-dan daha səmərəlidir.Çünki bir başqa .scss faylından yüklənmiş hansısa bir dəyişəni və ya funksiyanı faylın adıyla ayırmaq mümkün olur və qarışıqlığa fürsət yaratmır.

“@forward”

Biz başqa fayllarda da işlətmək istədiyimiz .scss fayllarını tək bir yerə yığıb ordan çağıra bilərikmi?Bəli,bunun üçün “@forward” ifadəsini işlətməyimiz kifayətdir.

Əvvəlcə işlədəcəyimiz fayllara baxaq :

İndi bu faylları bir fayl içinə yığaq :

Gördüyünüz kimi , hər iki faylı bir faylın içinə yığdıq və fayl adlarına uyğun ön hissə əlavə etdik.Yəni hər hansı bir dəyişəni,funksiyanı çağıranda həmin ifadəni əlavə etmək mütləqdir :

Bəs biz bəzi dəyişənləri,funksiyaları ötürmək istəməsək?Bunun üçün “hide” açar sözünü işlədə bilərik :

“as border-* “verdiyimiz üçün “border-dashed” yazmalı olduq

Bundan sonra “server” faylını çağıran digər fayllar “border-dashed” mixin-dən faydalana bilməyəcək :

Map(Xəritə)

Xəritələr özündə dəyər və onların açar sözünü saxlayır :

Burda “blue” — açar söz sayılır

Bu dəyərləri iş üçün map-get metodundan istifadə edə bilərik :

map-get metodunda öncə xəritənin adı ( $borders),sonra da dəyərini istədiyimiz açar sözü yazırıq( "red") Və sonda .css faylında bu nəticəni əldə edirik :

İki xəritəni birləşdirmək

.scss faylında olan iki xəritəni birləşdirmək üçün map-merge metodundan istifadə edə bilərik :

İki xəritəni toplayıb tək xəritə formasına gətirdik(Orginal borders və borders1 olduğu kimi qalır,nəsə dəyişilmir)

Bundan sonra iki xəritədə olan dəyərlərə də rahatlıqla tək bir xəritədən çata bilərik :

List(Siyahı)

Biz xəritələrdə açar sözlərdən istifadə etdik,siyahılarda isə buna ehtiyac duymadan sadəcə dəyərləri saxlaya bilərik.Öncə aşağıdakı kimi hazır modulu çağırmalıyıq :

@use "sass:list";

(Hazır modullar ilə bağlı ətraflı məlumat üçün bu link sizə faydalı olacaqdır)

Ardından siyahı əməliyyatlarımıza başlaya bilərik :

$sides : top,right,bottom,left;

Yuxarıda $sides adında siyahı təyin elədik.Biz siyahıdakı hansısa dəyərə çatmaq üçün nth() metodundan istifadə edə bilərik :

.box-#{nth($sides,1)}{
background-color: blue;}
.box-#{nth($sides,3)}{
background-color: blue;}
----> CSS
.box-top{
background-color: blue;}
.box-bottom{
background-color: blue;}

#{value} belə yazılışı hansısa bir dəyəri yazı formatına gətirmək üçün istifadə edirik.Bir elementin neçənci indeksdə olduğunu list.index() metodu ilə tapa bilərik :

list.index($sides,top) ;//1

Siyahıya hər hansı dəyər əlavə etmək üçün isə list.append() metodundan istifadə edə bilərik :

Biz siyahıya istənilən tip dəyər ötürə bilərik

Bugünkü yazımda “SASS”-ın özəlliklərinə bacardığım qədər toxunmağa çalışdım. Ümid edirəm ki,sizin üçün faydalı bir yazı olmuşdur.Növbəti yazılarda görüşmək diləyiylə,xudahafiz!

Faydalana biləcəyiniz qaynaqlar :

Documentation

Sass — freeCodeCamp.org