Schrägstriche ( `/`) in Werten CSS, wenn weniger (z.B. in `font` Stenografie)

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

  •  29-09-2019
  •  | 
  •  

Frage

Ich bemerkte ein Problem bei der Verwendung von weniger mit Schrift Stenographie 

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

versagt die oben mit 

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;

, wenn ich die Eigenschaften aufgespalten es funktioniert 

.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;

}

Ich denke, die wegen des Schrägstrichs / das ist das Problem verursacht, ich glaube, da weniger Berechnungen tun kann, zum Beispiel. 2px + 5 = 7px sein Versuch, eine Spaltung zu tun?

War es hilfreich?

Lösung

Just in dieser Ausgabe lief, die Escape-Funktion (für less.js sowieso) ist: e () Wie dies 

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

Andere Tipps

Der Schrägstrich / Charakter verursacht das LESS Compiler Ihren font-size durch Ihr line-height zu teilen. Sie können:

  1. Trennen Sie Ihre CSS in nicht-Stenografie, separate Regeln

    font-size: @size; line-height: @height;

  2. Escape einige oder alle Ihre WENIGER Schrift Stenographie Regel. Der Schrägstrich / selbst ist der beste Teil zu entkommen. Sie können die e, e("/") Escape-Syntax verwenden, oder die neuere, besser dokumentiert Tilde-Zitat ~"/". Sie können auch die LESS-String Interpolation @{} Syntax verwenden, um Ihre Variablen einfügen.

Versuchen Sie diese: 

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

Oder diese: 

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

LESS 1.4 und höher hat jetzt eine „strictMath“ Option, dass löst die Mehrdeutigkeit zwischen und Schrift Stenografie. In 1.4 es standardmäßig deaktiviert ist einfacher zu machen Übergang, aber in späteren Versionen wird es standardmäßig aktiviert werden.

Sehen Sie die 1.4 Hinweise hier

Wenn strictMath aktiviert, werden alle mathematischen Operationen in Klammern (10px / 5px) gewickelt werden müssen und der Schrägstrich in der Schrift kurz nicht als Teilung interpretiert werden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top