Ακύρωση μαθηματικών πράξεων στο 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);
}