Wie verhindere ich, dass Sass Leerzeichen vor Maßeinheiten hinzufügt?

Question

Ich versuche, this tutorial auf responsive Layout-Design zu folgen, aber mit SASS/SCSS als meine Basis-Spezifikation Sprache.

Zu diesem Zweck habe ich die folgende SCSS definiert:

body { 
    font: 100%/1.5; 
} 

h1 { 
    $h1_size: 24; 
    font-size: ($h1_size/16)em; 
    line-height:(28/$h1_size)em; 
    margin-top: (24/$h1_size)em; 
} 

Leider sieht die Ausgabe von sass in CSS-Format wie folgt aus:

h1 { 
    font-size: 1.5 em; 
    line-height: 1.167 em; 
    margin-top: 1 em; 
} 

- mit der Einheit von dem Wert getrennt durch ein Leerzeichen. Chrome lehnt diese Werte als ungültig ab und verwendet sie nur, wenn ich manuell die Leerzeichen lösche.

Gibt es eine Möglichkeit, dieses Problem zu beheben, indem Sie meinen SCSS optimieren oder eine Option an sass übergeben?

Bisher habe ich versucht:

• die Einheit in dem Berechnungs Abdrucken:
  
  • (font-size: ($h1_size/16em)) =>Fehler Syntax
  • (font-size: (($h1_size)em/16) =>font-size: 24 em/16; die ist das gleiche Problem, das ich versuche zu beheben

Answer 1

Sie die em in die $h1_size Definition schieben kann, die man einfach durch 16 und haben ein Ergebnis in ems teilen lassen.

Wenn beide Seiten der Division in em sind, wird Ihr Ergebnis unitless sein. Sie können einfach durch 1em multiplizieren, um Ihr Gerät bei Bedarf zurück zu bekommen.

h1 { 
    $h1_size: 24em; 
    font-size: ($h1_size/16); 
    line-height:(28em/$h1_size); 
    margin-top: (24em/$h1_size * 1em); 
} 

Multipliziert von 1em auch etwas näher an Ihrem ursprünglichen Beispiel Arbeit machen kann. Sie können die Dinge im Allgemeinen uneinheitlich halten und dann nur mit 1em multiplizieren, wenn das Gerät angezeigt werden soll. Dies vermeidet einige der sinnlosen em Proliferation in meinem ersten Beispiel:

h1 { 
    $h1_size: 24; 
    font-size: ($h1_size/16 * 1em); 
    line-height:(28/$h1_size); 
    margin-top: (24/$h1_size * 1em); 
} 

Welche Art und Weise meist mehr Sinn macht nur davon abhängt, ob die Ausgabe meist in einer Einheit sein, oder allerlei unterschiedlichen (einschließlich keiner).

Answer 2

gebe em in die Variable, so $h1_size: 24em;

Answer 3

Sie benötigen wie String-Interpolation zu verwenden, so: # {$ variable} em

Hier ist die Referenz: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

Answer 4

Sie den Raum mit einem +

h1 { 
    $h1_size: 24; 
    font-size: ($h1_size/16)+em; 
    line-height:(28/$h1_size)+em; 
    margin-top: (24/$h1_size)+em; 
} 

Will Ausgang entfernen .

h1 { 
    font-size: 1.5em; 
    line-height: 1.16667em; 
    margin-top: 1em; }