Sass

Vikipediya, azad ensiklopediya
Toghrul R (müzakirə | töhfələr) (CSS dəyişənləri: "Miksin"-lər haqqında) tərəfindən edilmiş 15:04, 31 may 2022 tarixli redaktə
(fərq) ← Əvvəlki versiya | Son versiya (fərq) | Sonrakı versiya → (fərq)
Naviqasiyaya keç Axtarışa keç
Sass
Loqonun şəkli
Yaradılma tarixi 28 noyabr 2006
Sonuncu versiyası
Təsirlənib CSS
Əməliyyat sistemi kross-platforma
sass-lang.com

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ı

[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; 
}
  • 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]