Avbryta matematiska operationer i LESS

Ibland finns det situationer där vi har en matematisk operation som inte bör uppfattas av LESS som ett kommando att beräkna. Till exempel uppstår ett sådant problem i CSS-funktionen calc:

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

Lyckligtvis kan LESS hantera sådana platser korrekt och kommer inte att utföra beräkningen under kompilering.

Det finns dock situationer där ett uttryck som inte kräver beräkning finns på en annan plats, till exempel i en variabel, så här:

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

I det här fallet kommer resultatet av beräkningen att skrivas in i variabeln, och i calc kommer en variabel med det beräknade värdet att skickas. För att förhindra detta kan vi uttryckligen ange att uttrycket ska förbli oförändrat.

För att göra detta måste uttrycket omges av citationstecken och tilde-tecken måste placeras framför det:

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

Korrigera koden så att den fungerar på ett korrekt sätt:

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

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