Funkcije

CSS pretprocesori – deo 2.

15:32 1
 Sass funkcije su, uz varijable, najkorisniji aspekt ovog jezika. Funkcije su
podeljene u više grupa u zavisnosti od tipa podataka.
 String funkcije
 Rad sa strignovima u Sass-u sličan je radu sa stringovima u drugim programiskim
jezicima, ali sa jednim izuzetkom. Ovo nisu nizovi. Prvi karakter u stringu je indeksa 1,
a ne 0. Neke funkcije su:
 str-index($string, $substring) – vraća indeks prve pojave podstringa, npr:
 str-index("Zdravo", „Z") - Rezultat: 1
 str-index("zdravo", "H") - Rezultat : null
 to-lower-case($string), to-upper-case($string)
 quote($string), unquote($string) - quote(zdravo) Rezultat : "zdravo"
 str-insert($string, $insert, $index) – umeće $insert string u $string na poziciju $index
 str-insert(" svete", "zdravo", 0) - Rezultat : "zdravo svete"
 str-length($string) – dužina stringa
15:32 2
 Numeričke funkcije

 round($number)- zaokruživanje na najbliži ceo broj. round(2.25) rez. 2

 ceil($number) - zaokruživanje na ceo veći broj. ceil(2.25) rez. 3
 floor($number) - zaokruživanje na ceo manji broj. floor(2.85) rez. 2
 abs($number) - apsolutna vrednost broja. abs(2) rez. 2, abs(-2) rez.2
 min($numbers) - vraća minimalnu vrednost u listi. min(2, 1, -1, 2, 0) rez. -2
 max($numbers) - vraća maksimalnu vrednost u listi.
 random() - vraća slučajnu vrednost od 0 do 1. random() rez. 0.87267
 random($limit) - slučajnu vrednost je ceo broj od 1 do $limit, uklj. $limit

15:32 3
 Funkcije lista

 length($lst) – broj elemenata u listi.

 nth($lst, $i) – vraća i-ti element u listi lst.
 nth(3 7 5, 3) rez. 5
 set-nth($lst, $i, $val) – postavlja i-ti element u lst na val.
 set-nth(3 2 1, 2, 4) (3 4 1)
 join($lst1, $lst2, [$sep]) – nadovezuje $lst2 na kraj $lst1. $sep argument može biti: zapeta,
razmak ili auto. Ako je auto, onda se koristi separator koji je inače u lst1.
 join(1 2 , 5 6)r. (1 2 3 4 5 6)
 append($lst1, $val, [$sep]) – dodaje jednu vrednost na kraj liste. $sep se ponaša kao u join.
 append((2, 3), 4) rez. (2, 3, 4)
 index($lst, $val) – vraća poziciju elementa val u listi.
 index((2,3,4,1,2),3)rez.2
 list-separator($lst) – vraća naziv separatorka koji se koristi u listi.
 list-separator((2, 3)) "comma"
15:32 4
 Map funkcije
 Map podaci u Sass-u predstavljaju parovi ključ-vrednost. Osim map funkcija koje će biti prikazane,
mogu se koristiti bilo koje od funkcija listi. Map funkcije su prikazane za map promenljivu :
$boje: ("header": #aaeeff, "footer": #aabbcc, "aside":#abbaff);

 map-get($map, $key) – vraća vrednost pridruženu specifičnom ključu.

Npr: map-get($boje, "aside"); rez. #abbaff
 map-merge($map1, $map2) – vraća novu mapu koja nastaje spajanjem map2 na kraj map1.
Npr: $boje:map-merge($boje, ("title": #0000ff));
 map-remove($map, $keys) – vraća novu mapu bez specifičnog ključa.
Npr: $boje2: map-remove($boje, "asides");
 map-keys($map) – vraća listu ključeva iz mape.
Npr: $kBoje: map-keys($boje); rez. "header", "footer", "aside"
 map-values($map) – vraća listu vrednosti iz mape.
 map-has-key($map, $key) – vraća boolean vrednost koja pokazuje da li u mapi postoji vrednost zadatog
ključa.

15:32 5
 Selector funkcije
 Omogućavaju rad i manipulaciu sa CSS selektorima.
 is-superselector($super, $sub) – vraća bool vrednost u zavisnosti da li je sub selektor obuhvaćen
selektorom super.
is-superselector("a", "a.disabled"); // true
is-superselector("sidebar a", "a"); // false
 selector-append($sel1, $sel2) – vraća novi selektor koji pridružuje sledeće uz prvi.
Selector-append("a", ".disabled"); // a.disabled
 selector-extend($sel, $sel1,$sel2) – proširuje sel tako što umesto sel1 postavlja proširenje sel1 sa sel2.
selector-extend("ul.disabled", "ul", ".mobile");// ul.disabled, .disabled.mobile
 selector-nest($sel1, $sel2, $sel2,..) – ubacuje ugnježden stil na osnovu navedenih.
selector-nest(".red", ".green", "div", "p"); // .red .green div p;
 selector-parse($sel) – parsira sel u niz stringova koji su selektori.
selector-parse(".red .green div,p")// .red .green div, p

15:32 6
 Color funkcije

 grayscale($color) vraća sivu boju istog intenziteta kao $color

 complement($color) vraća boju istog zasićenja ali hue 180 stepeni različit, dakle
komplement boje.
 invert($color) vraća inverznu boju.

 mix($color1, $color2) – kombijnuje dve boje. Postoji i opcija sa trećim argmentom koji
definiše odnos dve boje, a bez njega je pola/pola.
 darken($color, $amount), lighten($color, $amount), saturate($color, $amount),
desaturate($color, $amount) – smanjuje/povećava osvetljenje, povećava/umanjuje
zasićenje za odrenjeni procenat.

15:32 7
Sopstvene funkcije
 Moguće je pisanje I sopstvenih funkcija. Sopstvene funkcije se mogu pozivati iz drugih
sopstvenih funkcija i tako graditi složenije zavisnosti. Mora imati @return. Npr:

@function zbir($niz) {
$zbir: 0;

@each $n in $niz {
$zbir: $zbir + $n;
} //dobijeno
.sidebar {
@return $zbir; float: right;
} top: 4.5;
}
@function sredina($niz) {
$suma: zbir($niz);
@return $suma / length($niz);
}

.sidebar {
float: right;
top: sredina((3,4,5,6)); 15:32 8
}
Sass direktive

 Sass je deklarativni skriptni jezik, proširenje za CSS, a ne proceduralni

programski jezik kao što je JavaScript. Uprkos tome, on ima neke ograničene
procesne mogućnosti preko svojih direktiva. Direktive koje ćemo prikazati
pružaju mogućnost uključivanja stilova samo ako su ispunjeni određeni uslovi
ili višestruko preskakanje kroz odeljke Sass koda.
 @if
 @while
 @for
 @each

15:32 9
 @if
$prosek: 3;

div {
@if $prosek < 3.5 {
content: "losije od vrlodobar";
} div {
@else if $prosek == 5 { content: "losije od vrlodobar";
content: "sve petice"; }
}
@else { p {
content: "vrlodobar ili odlican, ali ne sve petice"; color: blue;
} background-color: white;
} }

p {
@if $prosek < 4 {
color: blue;

@if $prosek == 3 {
background-color: white;
}
} 15:32 10
}
@while
.h1 {
color: #884444;
}
$br: 1;
$clr: #884444; .h2 {
color: #a35252;
@while $br < 7 { }
.h#{$br} {
color: $clr; .h3 {
$clr: $clr*1.2; color: #c46262;
$br: $br + 1; }
}
} .h4 {
color: #eb7676;
}

.h5 {
color: #ff8d8d;
}

.h6 {
color: #ffa9a9;
}
15:32 11
@for .col-1 { .col-7 {
width: 8.33333%; width: 58.33333%;
Promenljiva ide od prve vrednosti } }
do poslednje. Ako se koristi reč to .col-2 { .col-8 {
onda poslednja nije uključena, a width: 16.66667%; width: 66.66667%;
ako se koristi through onda je } }
poslednja vrednost uključena.
.col-3 { .col-9 {
width: 25%; width: 75%;
} }

.col-4 { .col-10 {
width: 33.33333%; width: 83.33333%;
} }

@for $var from 1 to 12 { .col-5 { .col-11 {

.col-#{$var} { width: 41.66667%; width: 91.66667%;
width: 100% /12 * $var; } }
}
} .col-6 {
width: 50%;
}
15:32 12
@each

 @each direktiva se izvršava za sve stavke u listi ili mapi. Sintaksa je:

.red {
color: red;
}
@each $c in (red, green, blue) {
.#{$c} {
.green {
color: $c;
color: green;
}
}
}
.blue {
color: blue;
}

15:32 13
Importovanje

 Sass zadržava CSS kod DRY. Jedan od načina pisanja DRY koda je čuvanje istog
koda u zasebnim datotekama.
 Možete da kreirate male datoteke sa CSS celinama koje se uključuju u druge
Sass datoteke. Fajlovi moraju imati odgovarajuću ekstenziju .scss.
 Direktiva @import omogućava da sadržaj jedne datoteke uključite u drugu.
CSS @import direktiva ima veliku manu zbog problema sa performansama; on
stvara dodatni HTTP zahtev svaki put kada ga pozovete. Međutim, Sass
@import direktiva uključuje datoteku u CSS; pa nije potreban dodatni HTTP
poziv tokom izvođenja!

15:32 14
 // importovanje.scss
@import "scss/reset";
@import "scss/boje";
@import "scss/promenljive";

body {
// scss/promenljive.scss font-family: Helvetica, sans-serif;
$margineNaslova: 5px 5px 10px 10px; font-size: 18px;
$dani: ("pon":1,"ut":2,"sr":3,"cet":4,"pet":5,"sub":6,"ned":7 ) color: $clrTxt;
}
// scss/boje.scss
$clrTxt: darkgray; body h2 {
$clrBgnd: white; // generisano margin: $margineNaslova;
html, }
body,
// scss/reset.scss
ul,
html,
ol {
body,
margin: 0;
ul,
padding: 0;
ol {
}
margin: 0;
padding: 0;
body {
}
font-family: Helvetica, sans-serif;
font-size: 18px;
color: darkgray;
}

body h2 {
margin: 5px 5px 10px 10px; 15:32 15
}
Mixin - 1

 HTML5 uvodi više tagova semantičkog karaktera, poput <aside> i <article> koji
definišu značenje sadržaja umesto izgleda.
 Isto to ne važi i za CSS. Definisanje klasa poput .float-left, .row i .col je bolje
od ponovnog definisanja svojstava, ali one obično ne dodaju značenje HTML-
a.
 Postoje radni okviri CSS-a koji pokušavaju da reše problem. (Semantic UI je
jedan primer: semantic-ui.com.) Sass koristi @mixin direktive.
 Sastoji se od dva dela:
 Deo kojim se definiše mixin.
 Deo u kome se primenjuje definisan mixin.

15:32 16
Mixin - 2
//bez argumenata
 Sintaksa za definisanje mixin-a @mixin dugme {
button {
 @mixin name [(var1,var2,…)] { background-color: blue;
color: white;
 contents }
}
 }
 name – naziv koji se koristi u primeni
 contents - sadržaj koji definiše mixin
//sa argumenatima
 Mixin može da ima promenljive kojima se definiše @mixin dugme($clrBack, $clrTxt:black) {
ponašanje preko ulaznih argumenata. Pri tome može se button {
definisati i podrazumevana vrednost argumenta. background-color: $clrBack;
color: $clrTxt;
}
}

15:32 17
Mixin - 3
 Primena mixin-a se obavlja koristeći @include deklaraciju. Ukoliko je mixin definisan u
posebnom fajlu koristi se ista deklaracija ali sa putanjom i ekstenzijom fajla. Na primer
@import button.scss
//dobijeno
body {
@mixin button($pozBoja: gray, $txtBoja:yellow)
text-align: right;
{
}
button {
background-color: $pozBoja;
body button {
color: white;
background-color: darkgray;
margin: 2px;
@import "scss/button"; color: white;
margin: 2px;
&:hover {
body { }
color: darkblue;
@include button(darkgray,
}
lightblue); body button:hover {
text-align: right; color: darkblue;
&:visited {
} }
color: lightblue;
}
body button:visited {
}
15:32 color: lightblue;
18
}
}
Mixin - 4

 Obično se mixin-u prosleđuju argumenti i on definiše svojstva nad sadržajem.

Međutim, moguće je mixin koristiti i obrnuto tj. proslediti sadržaj nad kojim
se onda primenjuju neki stilovi. Sadržaj se prosleđuje preko @content
promenljive.
@mixin fontUkosen { div .napomena {
div { font-style: italic;
@content; color: darkblue;
} }
}

@include fontUkosen {
.napomena {
font-style: italic;
color: darkblue;
}
}
15:32 19
Proširenje (@extend)

 Često je potrebno da se neki stil proširi. Pri tome mixin je jedan od načina da se ovo reši bez
dupliranja koda.
 Sass pruža i drugi način, koristeći @extend direktivu, koja omogućava nasleđivanje stilova.
 Za razliku od mixin, proširenja ne trebate eksplicitno deklarisati. Bilo koje pravilo možete
proširiti drugim pravilima uključivanjem @extend direktive.

.button { // dobijeno
border-radius: 3px; .button, .menu-button {
margin: 3px; border-radius: 3px;
} margin: 3px;
}
.menu-button {
@extend .button; .menu-button {
background-color: lightgray; background-color: lightgray;
color: darkblue; color: darkblue;
} }
15:32 20
 // dobijeno
.button { .button, .nav-button, .nav-button-help, .nav-button-
border-radius: 3px; err {
margin: 3px; border-radius: 3px;
} margin: 3px;
}
.txtHelp {
color: darkgreen; .txtHelp, .nav-button-help {
} color: darkgreen;
}
.txtErr {
color: darkred; .txtErr, .nav-button-err {
} color: darkred;
}
.nav-button {
@extend .button; .nav-button, .nav-button-help, .nav-button-err {
background-color: lightgray; background-color: lightgray;
color: darkblue; color: darkblue;
} }

.nav-button-help {
@extend .nav-button;
@extend .txtHelp;
}

.nav-button-err {
@extend .nav-button;
@extend .txtErr; 15:32 21
}
Extend ili mixin

 Kada treba koristiti mixin, a kada @exend?

 Postoji nepisano pravilo da su mixin bez argumenata loš izbor - mixin koje
samo dupliraju kod bez razlike između dve instance. Istina je da postoje
detalji u tome.
 Važno je shvatiti da @exend stvara relaciju. Kad god koristite @extend,
ugrađujete selektor negde u kolekciji stilova kako bi mogao da deli osobine sa
drugim selektorima koji se takođe ugrađuju. Kao rezultat, ovi selektori dele
relacije, a ne pažljiva upotreba @exend direktive može stvoriti relacije oko
pogrešnog kriterijuma.

15:32 22
Preporuke
 Najpre se dodaju proširenje – extends.
 Zatim se dodaju uključenja – include.
 Slede regularni stilovi.
 Ugnježdeni pseudo stilovi i klase.
 Ugnježdeni slelektori.
 Ne pišite vendor prefikse – za to se može koristiti autoprefixer na primer.

 Podeliti kod na manje fajlove.

 Datoteke koje nisu samostalne tj. zavise od drugih obično se imenuju na način da se to prepozna, na
primer sufiksom partial
 Prevođenje koristeći Source Maps
 Za konačnu produkciju komiliranje sa kompresijom
 Dobinu ugnježdavanja izbegavati preko 3
 Svi česti brojevi u stilovima kao i oni sa značenjem se definišu promenljivim
 Sve boje definisati preko promenljivih

15:32 23
Zadatak

 Stilove koji su napisani u fajlu menuRWD1.html

izdvojiti u scss dokumente na što bolji način i
sa što manje linija koda.
 Posebno se vrednuju najbolja 3 reše.

15:32 24