Les barres obliques ( `/`) dans les valeurs de CSS pour l'utilisation de moins (par exemple, en abrégé `de font`)

StackOverflow https://stackoverflow.com/questions/3090340

  •  29-09-2019
  •  | 
  •  

Question

i remarqué un problème lors de l'utilisation moins avec un raccourci font 

.font(@weight: 300, @size: 22px, @height: 32px) {
    font: @weight @size/@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}

le défaut ci-dessus en 

this.a.toCSS is not a function
http://localhost/tumblr/modern1/css/style.less on line 1, column 0:
1. @highlight: #cb1e16;
2. @shade1: #cb1e16;

quand je partagerai les propriétés jusqu'à cela fonctionne 

.font(@weight: 300, @size: 22px, @height: 32px) {
  font-weight: @weight;
  font-size: @size;
  line-height: @height;
  font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

}

Je pense que à cause de la barre oblique / des thats l'origine du problème, je pense que depuis moins peut faire des calculs, par exemple. 2px + 5 = 7px son essayer de faire une division?

Était-ce utile?

La solution

Je viens de croiser cette question, la fonction d'échappement (pour less.js de toute façon) est: e () Comme cette 

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Autres conseils

Le caractère slash avant / est à l'origine du compilateur MOINS de diviser votre taille de police par votre hauteur de ligne. Vous pouvez:

  1. Séparez votre CSS dans un raccourci non, des règles distinctes

    -taille de la police: @size; line-height: @height;

  2. échapper une partie ou la totalité de votre règle de raccourci de police MOINS. La barre oblique / lui-même est la meilleure partie pour échapper. Vous pouvez utiliser le e, la syntaxe d'échappement de e("/"), ou la plus récente, tilde guillemet ~"/" mieux documentés. Vous pouvez également utiliser l'interpolation de chaîne MOINS syntaxe @{} pour insérer vos variables.

Essayez ceci: 

font: @weight @size~"/"@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Ou ceci: 

font: @weight ~"@{size}/@{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

MOINS 1.4 et au-dessus ont maintenant une option « strictMath » qui permet de résoudre l'ambiguïté entre sténo police. Dans la version 1.4, il est désactivé par défaut pour rendre la transition plus facile, mais dans les versions ultérieures, il sera activé par défaut.

Voir les 1.4 notes ici

Lorsque strictMath est activé, toutes les opérations mathématiques doit être enveloppé dans (10px / 5px) parenthèse et la barre oblique à court de la police ne sera pas interprétée comme division.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top