Sass

Sass (Syntactically Awesome Stylesheets) — CSS kod abstraksiyasının səviyyəsini artırmaq və stilin kaskad cədvəlləri sənədlərini asanlaşdırmaq üçün hazırlanmış bir CSS əsaslı metadil.

Sass-ın iki sintaksisi var:
 sass — burada əyri mötərizələrdən istifadə edilmir və abzas, boşluqlar vasitəsilə yuvalaşma aparılır.
 SCSS (Sassy CSS) — CSS-dəki əyri mötərizələrdən istifadə prinsipini saxlayır və yuvalaşma aparılır.

 Yuvalaşdırma qaydası 

Sass-ın əsas xüsusiyyətlərindən biri iç-içə olan selektorları yaratmağı və redaktə etməyi asanlaşdıran yuvalaşdırma qaydasıdır.

#header
  background: #FFFFFF

  .error
    color: #FF0000

  a
    text-decoration: none
    &:hover
      text-decoration: underline

Aşağıdakı sintaksislə CSS-ə çevrilir:

#header {
   background: #FFFFFF; 
}
#header .error {
   color: #FF0000; 
}
#header a {
   text-decoration: none; 
}
#header a:hover {
   text-decoration: underline; 
}

 CSS dəyişənləri 
Sass-ın daxilinə dəyişən və bir sıra parametri eyni dəyişənə çevirə bilən "miksin"-ləri () daxil etmək mümkündür. Bu, böyük fayllarla işləyən zaman kodun davamlılığını, çevikliyini və daha rahat anlaşılmasını təmin edir.

$linkColor: #00F

a
  color: $linkColor

Aşağıdakı sintaksislə CSS-ə çevrilir:

a {
   color: #00F; 
}
Miksinlərdən istifadə nümunəsi:@mixin border-radius($radius,$border,$color) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
    border:$border solid $color
}
.box { @include border-radius(10px,1px,red); }Aşağıdakı sintaksislə CSS-ə çevrilir:

.box {
   -webkit-border-radius: 10px; 
      -moz-border-radius: 10px; 
       -ms-border-radius: 10px; 
           border-radius: 10px; 
   border: 1px solid red; 
}

 İstinadlar 

 Ədəbiyyat 










 Xarici keçidlər 
 Rəsmi saytı

Kateqoriya:Proqramlaşdırma dilləri