Математички операции во 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;
}