Matematične operacije v LESS
V jeziku LESS lahko izvajamo matematične operacije s spremenljivkami in različnimi vrednostmi. Poglejmo si primere.
Primer
Seštejmo dve vrednosti:
p {
font-size: 5px + 10px;
}
Rezultat prevajanja:
p {
font-size: 15px;
}
Primer
Odštejmo eno vrednost od druge:
p {
font-size: 25px - 10px;
}
Rezultat prevajanja:
p {
font-size: 15px;
}
Primer
Pomnožimo vrednost s številom:
p {
font-size: 5px * 5;
}
Rezultat prevajanja:
p {
font-size: 25px;
}
Primer
Razdelimo vrednost s številom:
div {
width: 100% / 3;
}
Rezultat prevajanja:
div {
width: 33.33333333%;
}
Primer
Dodajmo vrednost vsebini spremenljivke:
@var: 100px;
div {
width: @var + 100px;
}
Rezultat prevajanja:
div {
width: 200px;
}
Primer
Seštejmo dve spremenljivki:
@var1: 100px;
@var2: 200px;
div {
width: @var1 + @var2;
}
Rezultat prevajanja:
div {
width: 300px;
}
Primer
Pri poskusu operacije z različnimi enotami LESS vse enote pretvori v eno - prvo. Primer:
div {
width: 100% - 10px;
}
Rezultat prevajanja:
div {
width: 90%;
}
Praktične naloge
Povejte, kakšen bo rezultat prevajanja naslednje kode:
#block {
width: 100px * 2;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
#block {
width: 200px / 3;
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
@var1: 500px;
@var2: 5;
#block {
width: @var1 / @var2;
}