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
Loqonun şəkli
Yaradılma tarixi 28 noyabr 2006
Sonuncu versiyası
Təsirlənib CSS
Əməliyyat sistemi kross-platforma
sass-lang.com

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ı[redaktə | mənbəni redaktə et]

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[redaktə | mənbəni redaktə et]

Sass-ın daxilinə dəyişən və bir sıra parametri eyni dəyişənə çevirə bilən "miksin"-ləri (ing. mixin) 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[redaktə | mənbəni redaktə et]

  1. ↑ http://sass-lang.com/documentation/file.SASS_CHANGELOG.html.

Ədəbiyyat[redaktə | mənbəni redaktə et]

  • Alex Libby. Instant SASS CSS How-to. Packt. 2013. ISBN 9781782163794.
  • Ben Frain. Sass and Compass for Designers. Packt. 2013. ISBN 9781849694551.
  • Hampton Catlin, Michael Lintorn Catlin. Pragmatic Guide to Sass. Pragmatic Bookshelf. 2011. ISBN 9781934356845.
  • Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Adam Stacoviak. Sass and Compass in Action. Manning Publications. 2013. ISBN 9781617290145.
  • Antony Kennedy, Inayaili de Leon. Ch. 9. Dynamic CSS → SASS // Pro CSS for High Traffic Websites. Expert's voice in web design. Apress. 2011. 279–293. ISBN 9781430232896.
  • Jennifer Niederst Robbins. Ch. 18. CSS Techniques → Sass and LESS // Learning Web Design. Fourth Edition. O'Reilly. 2012. 433. ISBN 978-1-449-31927-4.
  • Alex Starostin. "Improve CSS development with Sass". IBM developerWorks. 28 May 2013. İstifadə tarixi: 2013-12-14.
  • Ragnar Kurm. "Compile Your Style: Structuring and automating CSS". Web & PHP Magazine. İstifadə tarixi: 2013-12-14.
  • Jeremy Hixon. "An Introduction To LESS, And Comparison To Sass". Smashing Magazine. 2011-09-09. 2012-05-16 tarixində orijinalından arxivləşdirilib. İstifadə tarixi: 2012-03-31.

Xarici keçidlər[redaktə | mənbəni redaktə et]