Отмяна на математически операции в LESS
Понякога има ситуации, в които имаме
някаква математическа операция, която не
трябва да бъде възприета от LESS като команда за
изчисление. Например, такъв проблем възниква
в CSS функцията calc:
div {
width: calc(100% - 10px);
}
За щастие, LESS може коректно да обработва такива места и няма да извърши изчисление при компилация.
Има обаче ситуации, в които израз, който не изисква изчисление, се намира на друго място, например в променлива, ето така:
@exp: 100% - 10px;
div {
width: calc(@exp);
}
В този случай в променливата ще се запише резултатът
от изчислението и в calc ще се изпрати променливата
с изчислената стойност. За да не се
случи това, можем изрично да укажем, че изразът
трябва да остане в непроменен вид.
За това изразът трябва да се постави в кавички и да се постави знак тилда пред него:
@exp: ~'100% - 10px';
div {
width: calc(@exp);
}
Коригирайте кода, така че да заработи по коректен начин:
@exp1: ~'80% + 10px';
@exp2: ~'30vh - 10px';
div {
width: calc(@exp1);
margin-top: calc(@exp2);
}