Matemātisko darbību atcelšana LESS

Dažreiz rodas situācijas, kad mums ir kāda matemātiska darbība, kuru nevajadzētu uztvert kā komandu veikt aprēķinu. Piemēram, šāda problēma parādās CSS funkcijā calc:

div {
	width: calc(100% - 10px);
}

Par laimi, LESS spēj korekti apstrādāt šādas vietas un neveiks aprēķinu kompilācijas laikā.

Tomēr ir situācijas, kad izteiksme, kas neprasa aprēķinu, atrodas citā vietā, piemēram, mainīgajā, šādi:

@exp: 100% - 10px;
div {
	width: calc(@exp);
}

Šajā gadījumā mainīgajā tiks ierakstīts aprēķina rezultāts, un calc tiks nosūtīts mainīgais ar aprēķināto vērtību. Lai tas nenotiktu, mēs varam skaidri norādīt, ka izteiksmei jāpaliek nemainīgā formā.

Lai to izdarītu, izteiksme jāieliek pēdiņās un priekšā jāieliek tildes zīme:

@exp: ~'100% - 10px';
div {
	width: calc(@exp);
}

Izlabojiet kodu, lai tas darbotos korekti:

@exp1: ~'80% + 10px';
@exp2: ~'30vh - 10px';

div {
	width: calc(@exp1);
	margin-top: calc(@exp2);
}