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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@base-color: #ddd; @base-width: 10%; @double-width: @base-width * 2; @extra-height: 30% / 3; .result-class { color: #888 / 4; background-color: @base-color - #aaa; height: 100% / 2 + @extra-height; width: @double-width + 3; } |
Zostanie skompilowany do:
|
1 2 3 4 5 6 |
.result-class { color: #222222; background-color: #333333; height: 60%; width: 23%; } |
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.
