Sass
Naviqasiyaya keç
Axtarışa keç
Sass | |
---|---|
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;
}
İstinadlar
[redaktə | mənbəni redaktə et]Ə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.