Математичке операције у LESS-у
У LESS језику могуће је изводити математичке операције над променљивим и различитим вредностима. Погледајмо на примерима.
Пример
Сабирање две вредности:
p {
font-size: 5px + 10px;
}
Резултат компајлирања:
p {
font-size: 15px;
}
Пример
Одузимање једне вредности од друге:
p {
font-size: 25px - 10px;
}
Резултат компајлирања:
p {
font-size: 15px;
}
Пример
Множење вредности са бројем:
p {
font-size: 5px * 5;
}
Резултат компајлирања:
p {
font-size: 25px;
}
Пример
Дељење вредности са бројем:
div {
width: 100% / 3;
}
Резултат компајлирања:
div {
width: 33.33333333%;
}
Пример
Додавање вредности садржају променљиве:
@var: 100px;
div {
width: @var + 100px;
}
Резултат компајлирања:
div {
width: 200px;
}
Пример
Сабирање две променљиве:
@var1: 100px;
@var2: 200px;
div {
width: @var1 + @var2;
}
Резултат компајлирања:
div {
width: 300px;
}
Пример
При покушају операције са различитим мерним јединицама LESS ће све јединице претворити у једну - прву. Пример:
div {
width: 100% - 10px;
}
Резултат компајлирања:
div {
width: 90%;
}
Практични задаци
Реците какав ће бити резултат компајлирања следећег кода:
#block {
width: 100px * 2;
}
Реците какав ће бити резултат компајлирања следећег кода:
#block {
width: 200px / 3;
}
Реците какав ће бити резултат компајлирања следећег кода:
@var1: 500px;
@var2: 5;
#block {
width: @var1 / @var2;
}