Visoka škola strukovnih studija za informacione

i komunikacione tehnologije

Less
http://lesscss.org/

Milena Vesić, spec. stuk. inž.

Školska 2018/19. Danijela Nikitin, spec. stuk. inž.
 Šta je Less?
 Predstavlja CSS pre-processor

 Predstavlja dinamički jezik za obeležavanje koji može biti u

sastavu Cascading Style Sheets (CSS), a može biti pokrenut od
strane klijenta i od strane servera.

 Obezbeđuje sledeće mehanizme: promenljive, ugnježdene petlje,

mixin, operatore I funkcije koje generišu CSS kod

 Prevodi se u CSS pomoću specijalnih alata (javaScript, PHP, C#)

 Ekstenzija fajla je .less

 Upotreba na strani klijenta
(browser)
 Jedan od načina je obrada less fajla sa javaScript
bibliotekom

 <script src="less.js" type = "text /javascript "></script> ili

 <script
src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.j
s"></script>

 <link rel="stylesheet/less" type="text/css"

href="styles.less" />
Less sintaksa
 Promenljive
 Definišu se sa simbolom @ nakon koga sledi ime promeljive

LESS CSS
@boja:#252525; h2{
color:#252525;
h2{ border:1px solid #252525;
color:@boja; }
border:1px solid @boja; #sadrzaj{
} background:#252525;
#sadrzaj{ }
background:@boja;
}
 Promenljive
 Promenljive se mogu koristiti i u nazivima svojstava

LESS CSS
@svojstvo: color; .blok {
color: #0ee;
.blok { background-color: #999;
@{svojstvo}: #0ee; }
background-@{svojstvo}: #999;
}
 Mixin
 Mixins dopuštaju ugradnju svih svojstava jedne klase u
drugu klasu, koristeći ime klase kao jedno od svojstava,
tako da se ponašaju kao konstante ili promenljive.

 Ovaj mehanizam takođe oponaša i funkcije, koristeći

argumente. CSS ne podržava ovo svojstvo.

 Ponovljeni kod mora biti ponovljen na svakoj poziciji.

 Osnovna prednost je što ovaj mehanizam omogućava

efikasnost, kao i jednostavne izmene koda.
 Mixin
LESS CSS
.bordura { .bordura {
border-top: dotted 1px black; border-top: dotted 1px black;
border-bottom: solid 2px black; border-bottom: solid 2px black;
} }
#navigacija a { #navigacija a {
color: #111; color: #111;
.bordura; border-top: dotted 1px black;
} border-bottom: solid 2px black;
}
.tekst a { .tekst a {
color: red; color: red;
.bordura; border-top: dotted 1px black;
} border-bottom: solid 2px black;
}
 Mixin

LESS CSS
.border-radius (@radius) { #zaglavlje{
border-radius: @radius; border-radius:4px;
} }
#zaglavlje {
.border-radius(4px); .dugme{
} border-radius:6px;
.dugme { }
.border-radius(6px);
}
 Mixin

LESS CSS
.border-radius-default(@radius: 5px) { #sadrzaj{
border-radius: @radius; border-radius:5px;
} }
#sadrzaj {
.border-radius-default; #futer{
} border-radius:10px;
#futer { }
.border-radius-default(10px);
}
 Ugnježdene petlje

 CSS podržava lokalne ugnježdene petlje, ali blokovi koda

sami po sebi nisu ugnježdene petlje.

 Less dopušta ugnježdene petlje ili selektore unutar drugih

selektora, što omogućava jednostavno nasleđivanje i kraći
kod.
Ugnježdene petlje
LESS CSS
#zaglavlje{ #zaglavlje h1{
h1{ font-size:30px
font-size:30px; }
} #zaglavlje p{
p{ font-size:14px
font-size:14px; }
a{ #zaglavlje p a{
text-decoration:none; text-decoration:none;
&:hover{ }
color:#666; #zaglavlje p a:hover{
} color:#666;
}
} }
}
 Ugnježdene petlje
LESS CSS
.blok { .blok {
width: 300px; width: 300px; }
@media (min-width: 768px) { @media (min-width: 768px) {
width: 600px; .blok {
@media (min-resolution: 192dpi) { width: 600px;
background-image: }
url(/img/slika.png); }
} @media (min-width: 768px) and (min-
} resolution: 192dpi) {
@media (min-width: 1280px) { .blok {
width: 800px; background-image: url(/img/slika.png);
} }
} }
@media (min-width: 1280px) {
.blok {
width: 800px;
}
}
 Funkcije i operatori
 Less dopušta korišćenje funkcija i operatora. Operacije koje se
koriste su sabiranje, oduzimanje, množenje i deljenje vrednosti i
boja, što se koristi kako bi se stvorila kompleksna veza između
svojstava.
LESS CSS CSS
@ivica: 1px; #zaglavlje {
@osnovnaBoja: #111; color: #333;
@crvena: #842210; border-left: 1px;
border-right: 3px;
#zaglavlje { }
color: @osnovnaBoja * 3; #futer {
border-left: @ivica; color: #114411;
border-right: @ivica * 3; border-color: #7d2717;
} }
#futer {
color: @osnovnaBoja + #003300; *desaturate – smanjenje zasićenosti
border-color: desaturate(@crvena,
10%);
}
 Funkcije
 Less poseduje veliki broj funkcija za obradu podataka
 image-size
 Parametri: string: datoteka za dobijanje dimenzija.
 Funkcija vraća: dimenzija
 Primer: image-size("file.png");
 Izlaz: 10px 10px

 image-width
 Parametri: string: datoteka za dobijanje dimenzija.
 Funkcija vraća: dimenzija
 Primer: image-width("file.png");
 Izlaz: 10px 10px
 Funkcije

 length
 @list: "banana", "tomato", "potato", "peach";
 n: length(@list);
 Izlaz: n: 4;

 extract
 @list: apple, pear, coconut, orange;
 value: extract(@list, 3);
 Izlaz: value: coconut;
 Funkcije

 Matematičke funkcije
 Ceil,
 Floor,
 Percentage,
 Round,
 Sqrt,
 Pi,
 Pow,
 Min,
 Max....
 Funkcije

 Funkcije za boje
 Hue,
 Saturation,
 Saturate,
 Desaturate,
 Lighten,
 Darken,
 Shade,
 Greyscale....
 Imenski prostori
 Omogućava grupisanje koda zbog ponovne upotrebe i da
ne bi došlo do mešanja imena
#omot {
.button {
display: block; border: 1px solid black;
background-color: grey;
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#omot > .button;
}
 Scope – opseg promenljivih
 Pravila važenja promenljivih su ista kao i kod ostalih
programskih jezika

@var: #FF0000; @var: #FF0000;

#page { #page {
@var: #FFF; #header {
#header { color: @var; // bela iako je
color: @var; // bela definisan posle
} }
} @var: #FFF;
}
 Uvoz (import) fajlova

 U okviru less fajlova možete ubacivati (importovati) i

dodatne fajlove preko naredbe @import
 @import “biblioteka"; // biblioteka.less

 @import “nesto.css";
 Extend
 Less podržava nasleđivanje

LESS CSS CSS

nav ul { nav ul {
&:extend(.inline); background: #0000ff;
background: #0000ff; }
} .inline, nav ul {
.inline { color: #ff0000;
color: #ff0000; }
}
 Uslovi (Guard)

 Koristite se prilikom potrebe poređenja

 Svaka vrednost različita od indektifikatora true je netačna
 Koristi se ključna reč when
 Koriste se matematički operatori za poređenje (=,<,>......).
 Zarez označava nabrajanje

 .mixin (@a) when (@a > 10), (@a < -10) { ... }

 button when (@opcija = true) { color: white;}

 Petlje
 Ako je potrebno ponavljanje koda u iteracijama koriste se petlje

.loop(@counter) when (@counter > 0)

{
.loop((@counter - 1)); // sledeća iteracija
width: (10px * @counter); // kod koji se izvršava u jednoj iteraciji
}
div {
div {
width:10px;
.loop(5); // pokreni
width:20px;
petlju
width:30px;
}
width:40px;
width: 50px;
}
 Petlje

 Generisanja klasa za kolone

.generate-columns(4); column-1 {
width: 25%;
.generate-columns(@n, @i: 1) when (@i =< @n) { }
.column-@{i} { .column-2 {
width: (@i * 100% / @n); width: 50%;
} }
.generate-columns(@n, (@i + 1)); .column-3 {
} width: 75%;
}
Rekurzivno
.column-4 {
pozivanje
width: 100%;
}
 Online compiler

 http://winless.org/online-less-compiler