LESS tutorial logo

Operacje arytmetyczne

autor: Robert

6 lutego 2015

Jak wiecie CSS nie ma możliwości wykonywania operacji arytmetycznych. No może nie do końca bo CSS3 udostępnia zapis calc(); ale jest on jeszcze dopracowywany i nie pozwala robić wszystkich działań. Tutaj z pomocą przychodzi nam LESS, który pozwala na dodawanie, odejmowanie, dzielenie, mnożenie a nawet na obliczanie procentów czy pierwiastków (ale o nich później).

Póki co skupmy się na 4 podstawowych działaniach czyli +, -, *, /.
Możemy dodać coś do zmiennej lub 2 i więcej zmiennych, analogicznie z odejmowaniem.
Możliwe jest także mnożenie i dzielenie zmiennych przez zmienne lub przez liczby.

Dodatkowo LESS jest na tyle „inteligentny”, że dodając przykładowo 10% + 5 otrzymamy 15%.

Myślę, że nie ma się co nad tym rozwodzić bo każdy z Was potrafi dodawać czy dzielić a najlepiej pokaże to przykład:

Zostanie skompilowany do:

Jak przeanalizujecie sobie najpierw zapis LESSa a następnie CSSa to zobaczycie, że działania zostały wykonane i w drugim pliku mamy już ich wyniki.


Komentarze: Bądź pierwszy!