Sass (stilski jezik)

S Vikipedije, slobodne enciklopedije
Sass
Sass logo
Originalni nazivengl. Sass
Izgovara seSas
Pojavio se28. novembar 2006. god.; pre 17 godina (2006-11-28)
Autor(i)Natali Vajzenbaum i Kris Epstajn
Dizajner(i)Hempton Kejtlin
Aktuelna verzija3.5.2
Datum aktuelne verzije4. oktobar 2017. god.; pre 6 godina (2017-10-04)
Sistem tipovadinamički
ImplementacijeRubi
UticajiCSS, YAML, Haml
Uticao naLESS, Stylus, Tritium
Operativni sistemiViše platformi
LicencaMIT Licenca
Veb-sajtsass-lang.com
Dokumentacijasass-lang.com/documentation/file.SASS_REFERENCE.html

Sass (engl. Syntactically Awesome Stylesheets) je stilski jezik koji je prvobitno dizajnirao Hempton Kejtlin i koji je razvio Natali Vajzenbaum.[1][2] Posle inicijalne verzije Vajzenbaum i Kris Epstajn su nastavili da nadograđuju Sass sa SassScript-om, jednostavnim skriptnim jezikom koji se koristi u Sass fajlovima.

Sass je skriptni jezik koji se interpretira u CSS. SassScript je skriptni jezik za sebe. Sass sadrži dve sintakse. Originalna sintaksa, zvana “uvučena sintaksa”, koristi sintaksu sličnu Haml-u.[3] Ona koristi uvlačenje za odvajanje blokova koda i novi red znakova za dodavanje novih pravila. Nova sintaksa, SCSS, koristi blokove za formatiranje kao skriptni jezik CSS. Ona koristi zagrade za odvajanje blokova koda i znak tačka-zarez za odvajanje linija unutar bloka. Uvučena sintaksa i SCSS fajlovi tradicionalno imaju ekstenzije .sass i .scss.

CSS3 se sastoji od selektora i pseudo-seletora koji grupišu pravila koja se odnose na njih. Sass (u širem kontekstu za obe sintakse) proširuje CSS tako što dodaje mehanizme koji su dostupni u tradicionalnim programski jezicima, naročito u objektno-orijentisanim jezicima, ali koji nisu dostupni u samom CSS3 skriptnom jeziku. Kada se SassScript interpretira, on kreira blokove CSS pravila za različite selektore koji su prethodno definisani u Sass fajlu. Sass interpreter prevodi SassScript u CSS. Alternativno, Sass može da posmatra .sass ili .scss fajlove i da ih prevede i izbaci .css fajl kad god se .sass ili .scss fajl sačuva.[4] Sass je jednostavno “sintaksni šećer” za CSS.

Zvanična implementacija Sass-a je softver otvorenog koda i napisana je u programskom jeziku Rubi; međutim, postoje i druge implementacije uključujući implementaciju u PHP-u i implementaciju visokih performansi u C-u, zvanu libSass.[5][6] Takođe postoji Java implementacija koja se zove JSass. Dodatno, Vaadin nudi Java implementaciju Sass-a.[7] Uvučena sintaksa je meta jezik. SCSS je ugnježdeni meta jezik, validan CSS je validan SCSS sa istom semantikom. Sass podržava integraciju sa Firebug ekstenzijom za Mozilu Fajerfoks.

SassScript obezbeđuje sledeće mehanizme: promenljive, ugnježdenje, miksine i nasleđivanje selektora.

Promenljive[uredi | uredi izvor]

Sass pruža mogućnost definisanja promenljivih. Promenljive počinju sa znakom za dolar ($). Vrednost se promenljivama dodaje pomoću znaka dvotačka (:).

SassScript podržava četiri tipa podataka:

  • Brojeve (uključujući i jedinice mere)
  • Stringove (sa navodnicima ili bez njih)
  • Boje (ime ili imena)
  • Bulovu algebru

Promenljive mogu biti argumenti ili rezultati iz jedne od dostupnih funkcija.[8] Za vreme prevođenja promenljive se ubacuju u izlazni CSS dokument.

U SCSS stilu: 

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

Ili u Sass stilu: 

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

Se prevodi kao: 

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Ugnježdenje[uredi | uredi izvor]

CSS ne podržava logičko ugnježdenje, ali sami blokovi koda nisu ugnježdeni. Sass omoguđava da blokovi koda budu umetnuti jedan u drugi.

U Sass stilu 

table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
  
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em

ili SCSS stilu 

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

Se prevodi kao: 

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

Komplikovaniji tipovi ugnježdenja, kao što su ugnježdenje imenskih prostora i nadređenih referenci su objašnjeni u Sass dokumentaciji.

Miksini[uredi | uredi izvor]

CSS ne podržava miksine. Svaki promenjeni kod se mora menjati na svakoj lokaciji. Miksin je deo koda koji sadrži bilo koji validan Sass kod. Kad god se miksin pozove, pravila koja su napisana u miksinu se prevode na mesto gde je miksin pozvan. Miksini omogućavaju lako i jednostavno održavanje koda.

U SCSS stilu 

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}
#data {
  @include table-base;
}

Ili u Sass stilu 

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px
#data
  +table-base

Se prevodi u: 

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Petlje[uredi | uredi izvor]

Sass dozvoljava iteraciju kroz varijable pomoću @for, @each i @while petlji, što se može iskoristiti da se na elementima sa različitim klasama i id-ovima primene različiti stilovi. 

$squareCount: 3
@for $i from 1 through $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i

Se prevodi u: 

#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}
#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}
#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

Argumenti[uredi | uredi izvor]

Miksini takođe podržavaju argumente. 

=left($dist) 
  float: left
  margin-left: $dist
#data 
  +left(10px)

Se prevodi u: 

#data {
  float: left;
  margin-left: 10px;
}

U kombinaciji[uredi | uredi izvor]

=table-base
  th
    text-align: center
    font-weight: bold
  td, th 
    padding: 2px

=left($dist) 
  float: left
  margin-left: $dist
#data 
  +left(10px)
  +table-base

Se prevodi u: 

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Nasleđivanje selektora[uredi | uredi izvor]

Dok CSS3 podržava hijerarhiju objektnog modela dokumenata (engl. Document Object Model - DOM), on ne dozvoljava nasleđivanje selektora. U Sass-u se nasleđivanje vrši ubacivanjem linije koda u blok koji koristi ključnu reč @extend i koji referencira drugi selektor. Atributi proširenog selektora se primenjuju na pozvani selektor. 

.error
  border: 1px #f00
  background: #fdd

.error.intrusion 
  font-size: 1.3em
  font-weight: bold

.badError 
  @extend .error
  border-width: 3px

Se prevodi u: 

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Sass podržava višestruko nasleđivanje.

libSass[uredi | uredi izvor]

Na HTML5 Developer konferenciji 2012. godine, Hempton Kejtlin, tvorac Sass-a, je predstavio verziju 1.0 libSass-a, C++ implementacije Sass-a koju su napravili Kejtlin, Aron Liong i ostali inženjeri tima u Moovweb.[6][9] Trenutni razvijač Sass-a, Kris Epstajn, je objasnio doprinos Sass-a.[10]

Po Kejtlinovom mišljenju, libSass može "da se ubaci u bilo šta i on će imati Sass u sebi... Mogli biste da ga danas ubacite direktno u Fajerfoks i on će se kompajlirati. Napisali smo naš parser od nule da bismo bili sigurni da je to moguće."[11]

Ciljevi libSass-a su:

  • Performanse – programeri su prijavili da jebrzina povećana 10 puta nakon implementacije Sass-a u Rubi.[12]
  • Lakša integracija – libSass olakšava integraciju Sass-a u sve više softvera. Pre libSass-a, za bolju integraciju Sass-a u programski jezik ili softver bilo je potrebno da se upakuje kompletan Rubi interpreter. Za razliku od toga, libSass je statički povezana biblioteka bez zavisnih modula i okruženjem nalik C programskom jeziku, što olakšava ubacivanje Sass-a direktno u druge programske jezike i alate. Na primer, libSass povezivanje otvorenog koda sada postoji za Node.js, Gou i Rubi.[9]
  • Kompatibilnost – cilj libSass implementacije je potpuna kompatibilnost sa zvaničnom Rubi implementacijom Sass-a; međutim, ovaj cilj još uvek nije u potpunosti ostvaren.

IDE integracija[uredi | uredi izvor]

Razvojno okruženje Softver veb-sajt
Adobe Dreamweaver CC 2017 https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ Arhivirano na sajtu Wayback Machine (14. novembar 2016)
Eclipse
Emacs SCSS Mode https://github.com/antonj/scss-mode/
JetBrains IntelliJ IDEA (Ultimate Edition) https://www.jetbrains.com/idea/
JetBrains PhpStorm http://www.jetbrains.com/phpstorm/
JetBrains RubyMine http://www.jetbrains.com/ruby/
Microsoft Visual Studio Mindscape http://www.mindscapehq.com/products/web-workbench
Microsoft Visual Studio SassyStudio http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d
Microsoft WebMatrix https://web.archive.org/web/20150512042040/http://www.microsoft.com/web/
NetBeans http://plugins.netbeans.org/plugin/34929/scss-support Arhivirano na sajtu Wayback Machine (8. oktobar 2015)
Vim haml.zip http://www.vim.org/scripts/script.php?script_id=1433
Atom https://github.com/atom/language-sass
Visual Studio Code https://code.visualstudio.com/Docs/languages/css

Vidi još[uredi | uredi izvor]

Reference[uredi | uredi izvor]

  1. ^ „Arhivirana kopija”. Arhivirano iz originala 01. 09. 2013. g. Pristupljeno 14. 05. 2015. 
  2. ^ „Natalie Weizenbaum's blog”. Arhivirano iz originala 11. 10. 2007. g. Pristupljeno 14. 05. 2015. 
  3. ^ Media Mark (3.2.12). „Sass - Syntactically Awesome Stylesheets”. Sass-lang.com. Pristupljeno 23. 02. 2014. 
  4. ^ Sass - Syntactically Awesome Stylesheets Arhivirano na sajtu Wayback Machine (9. oktobar 2013) Tutorial
  5. ^ „Sass / Scss”. Drupal.org. Pristupljeno 23. 02. 2014. 
  6. ^ a b H. Catlin (15. 10. 2012). „Hampton's 6 Rules of Mobile Design”. HTML5 Developer Conference. Pristupljeno 11. 07. 2013. 
  7. ^ „SassCompiler (Vaadin 7.0.7 API)”. Vaadin.com. 06. 06. 2013. Arhivirano iz originala 21. 04. 2014. g. Pristupljeno 23. 02. 2014. 
  8. ^ Module: Sass::Script::Functions Sass Functions
  9. ^ a b M. Catlin (30. 04. 2012). „libsass”. Moovweb Blog. Arhivirano iz originala 08. 05. 2013. g. Pristupljeno 11. 07. 2013. 
  10. ^ C. Eppstein (15. 04. 2012). „Tweet”. Pristupljeno 11. 07. 2013. 
  11. ^ A. Stacoviak & A. Thorp (26. 06. 2013). „Sass, libsass, Haml and more with Hampton Catlin”. Arhivirano iz originala 06. 08. 2013. g. Pristupljeno 30. 07. 2013. 
  12. ^ D. Le Nouaille (07. 06. 2013). „Sassc and Bourbon”. Pristupljeno 11. 07. 2013. 

Spoljašnje veze[uredi | uredi izvor]

Preuzeto iz „https://sr.wikipedia.org/w/index.php?title=Sass_(стилски_језик)&oldid=26784244”