. Love.az

Sass - Wikipedia - Love.az

Ana Səhifə - 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ı
  • 3.4.8[1]
Təsirlənib CSS
Əməliyyat sistemi çarpaz platformalı[d]
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.

Mündəricat

  • 1 Yuvalaşdırma qaydası
  • 2 CSS dəyişənləri
  • 3 İstinadlar
  • 4 Ədəbiyyat
  • 5 Xarici keçidlər

Yuvalaşdırma qaydası

redaktə

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ə

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ə
  1. ↑ http://sass-lang.com/documentation/file.SASS_CHANGELOG.html.

Ədəbiyyat

redaktə
  • 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ə
  • Rəsmi saytı
Mənbə — "https://az.wikipedia.org/wiki/?q=Sass&oldid=8059469"
LOVE.AZ