Адмена матэматычных аперацый у 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);
}