Css Pre-Processors’u : SASS

Published in

Pragmatech

4 min readMar 20, 2020

Sass (Syntactically Awesome Style Sheet) bir css preprocessor’udur. 2006 cı ildən Hampton Catlin tərəfindən kodlanmağa başlanılmışdır. SASS ruby dilinə oxşar bir məntiqdə yaradılıb bu dəqiqə də githubda inkişaf elətdirilməyi davam etdirilir.

SASS CSS yazmağı asanlaşdırdığı kimi bizə CSS yazmaq üçün fərqli imkanlar yaradır. Dəyişgən təyin etmək(Variables), iç içə yazılmış elementlərin asan oxunulması(nested rules), mixins, imports, if statement, for loop vs. Əslində SASSa bir növ CSS programlaşdırma dilidə demək olar.

Komputerinizə SASS quraşdırmadan işləmək üçün https://www.sassmeister.com/ saytından istifadə edə bilərsiniz.

Variables:

Dəyişgən tanımlamaq CSSdə əlavə kodlar istifadə etməyin qarşısını alır və kodlamamızın sürəti üçün bizə kömək edir. Məsələm hər hansısa bir DİV elementinə HEX color təyin etmişiksə bəzən onu unuda bilirik yuxarı qalxıb onu axtarırıq. Variablelər aşağıdakı şəkildə təyin edilir

Data Types:

Data tipləri digər programlaşdırma dillərində olduğu kimidir.

Number

Rəqəmlərdən İbarətdir . Yanına px ya da em kimi vahidləridə əlavə edə bilərik (nümunə: 10, 1.5, 16px, 1.2em)

Diqqət !!!!
Rəqəmlərə bir riyazi əməl yertirmək olar lakin fərqli vahidlərdən istifadə errorra səbə olacaqdır.

SCSS:
$number: 10 + 5;
// $number: 15;$number: 10px + 5;
// $number: 15px;$number: 1.5em + 1.3em;
// $number: 2.8em;$number: 10px + 5em;
// E R R O R. . .

STRING

SASSda stringin istifadəsinin üstün cəhəti istər dırnaq içərisində yazın istər yazmayın o STRİNG olaraq qəbul edilir (“arial” və ya arial)

SCSS:$font-type: "Arial"; 
      ya da 
$font-type: 'Arial'; 
      ya da 
$font-type: Arial;p{
   font-family: $font-type, "Times New Roman", sans-serif;
}

BOOLEAN

2 növü var (true, false) tək başına bir anlamı yoxdur. İf kimi funksiyalarla işlədilir.

SCSS:
$data: true;
$data: false;

NULL:

Null boş olaraq istifadə edilir.

SCSS:
$data: null;

COLOR: Rənglərdə sass’da bir data növüdür. Eləmli olduğumuz tək şey bir dəyişkənə rəng təyin etməkdir.

$color: red;
$color-2: lighten(white, 15%); // #b8dc70p{
   color: $color-2;
}

Nested Rules:

Still elemetlərini iç içə yazmaq bizi kod təkrarından qurtarır.

Css istifadə edən zaman İç içə stilləri parent-child şəklindı edirdik bu isə qarışıqlığa səbəb olurdu.

Pseudo Classes:

Pseudo klasslar :hover , :after kimi elementlərdir.

SCSSdə pseudo klas istifadə etmək üçün həmin elementin daxilinə & simvolu ilə yazılır.

Comments:

SCSSda cüt sətirli kommentlər /* . . . */ tək sətir üçün isə// istifadə edilir.

Mixins:

Mixins saytda istfadə edə biləcəyimiz kod qruplarıdır. SASS faylımızda mixin təyin edib istədiyimiz yerdə include vasitəsi ilə daxil edilir.

@mixin banner{
   width: 100%;
   position: relative;
   .banner-content{
      position: absolute;
      width: 100%;
      top: 50%;
   }
}.lead-banner{
   @include banner;
   text-align: right;
}.lessons-banner{
   @include banner;
}

Importing Files:

SASS yazarkən ən effektiv üsul hər bir component üçün fərqli bir SASS faylı yartmaq sonra isə onları 1 əsas Sass faylına import etməkdir.

style.scss@import “normalize”;
@import “variables”;
@import “mixins”;

Mathematical Operators:

Hər bir programlaşdırma dilində olduğu kimi SCSSda da riyazi əməllər vardır. (+,*,-,/)

Fərz edək ki əlimizdə 6 ədəd li elementi var onları ekran boyunca eyni ölçü ilə bölmək üçün:

li{
 width( 100% / 6);
}

Extend:

Fərz edək ki bir elementin propertilərini digər bir elementə təyin etmək lazımdır. Onları yenidən yazmaq kod uzanmasına səbəb olur.\

Bunun üçün @extend miras-alinanin-adı olaraq istifadə edirik.

.button-base {
   margin: 2px;
   radius: 2px;
}.error-base {
   background-color: red;
}.error-button {
   @extend .button-base;
   @extend .error-base;
}

Mixin ve extend istifadəsi bir-birinə çox oxşayır.

if statement:

İf else statement hər bir programlama dilində olduğu kimidir.

Məsələn P elementinə ölçüyə görə color vermək üçün aşğıdaki statement istifadə edilir.

SCSS:
$data: 12;p {
   @if $data < 3 {
      color: red;
   }
   @else if $data == 3 {
      color: blue;
   }
   @else {
      color: white;
   }
}

for Loop:

Looplar 1 işin ard arda ediliməsi üçün ən yaxşı yoldur. Yazılan bir sətirin bir neçə dəfə işləməsinə kömək edir.

for syntax:@for <dəyişkən> from <başlanğıc dəyər> through <son dəyər> {
 <propertylər>
}

Nümunə:

Sass vs SCSS (Sassy Cascading Style Sheet)

SASS yaradıqdan sonra bir neçə developerlər bu dilidə CSS dilinin sintaksisindən kənara çıxıldığını və bəzi developerlərin bunu sevməyəcini bildirdilər və buna görədə bir neçə versiya (SCSS, Sassy CSS ) yaradıldı.

SCSSdan fərqli olaraq SASSda ; və {} yoxdur. Bunda əlavə sintaksisində bir neçə dəyişikliklər vardır. Məsələn SASSda mixin yazmaq üçün @mixin deyil =mixin şəklində yazırıq.

Sass website : http://sass-lang.com/guide