web-dev-qa-db-fra.com

Existe-t-il un moyen d'utiliser des variables dans Less pour l'opérateur ~, comme ~ "calc (100% - @spacing)";

Existe-t-il un moyen d'utiliser des variables en moins ~ opérateur, comme

~"calc(70% - @spacing)";

Quand je l'ai essayé, cela ne fonctionne qu'avec des valeurs statiques comme

 ~"calc(70% - 10px)";

Puis-je obtenir la chaîne à évaluer avant d'être définie comme propriété.

css3lesscss-calc
57
patricjansson

Pour désactiver le calcul que LESS effectue automatiquement lors de la découverte d'un - entre deux valeurs numériques mais toujours en mesure d'utiliser des variables, vous pouvez écrire l'une des valeurs suivantes:

1) N'échappez qu'à l'opérateur qui déclenche le calcul et utilisez la variable comme vous le faites normalement

@padding: 20px;
body {
    padding: calc(100% ~"-" @padding);
}

2) Échappez à l'expression entière et interpolez la variable avec le @{padding} notation

@padding: 20px;
body {
    padding: ~"calc(100% - @{padding})";
}

Je préfère la deuxième version, car elle ressemble à littéraux de modèle de javascript et semble un peu plus propre, mais dans les deux cas, cela fonctionne très bien.

Les deux solutions désactivent le calcul automatique Moins et compilent pour le résultat correct:

body {
  padding: calc(100% - 20px);
}
162
Christoph