Jak zatrzymać Sass dodawanie spacji przed jednostkami miary?

Question

Próbuję postępować zgodnie z this tutorial w sprawie projektowania responsywnego układu, ale przy użyciu SASS/SCSS jako mojego języka specyfikacji podstawowej.

W tym celu, I zostały zdefiniowane następujące SCSS:

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

Niestety, wyjście z sass w formacie CSS wygląda następująco:

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

- przy jednostce oddzielonej od wartości przez spację. Chrome odrzuca te wartości jako nieprawidłowe i korzysta z nich tylko wtedy, gdy samodzielnie ręcznie usuwam spacje.

Czy istnieje sposób naprawienia tego problemu przez zmodyfikowanie mojego SCSS lub przekazanie opcji do sass?

Do tej pory próbowałem:

• umieszczenie urządzenia wewnątrz obliczenia:
  
  • (font-size: ($h1_size/16em)) => Błąd składni
  • (font-size: (($h1_size)em/16) =>font-size: 24 em/16; który to jest ten sam problem, który próbuję naprawić

Answer 1

Można przekazać em do definicji $h1_size, która pozwoli Ci po prostu podzielić przez 16 i masz wynik w ems.

Jeśli obie strony podziału znajdują się w em, Twój wynik będzie bez jednostki. Możesz łatwo pomnożyć przez 1em, aby odzyskać swoją jednostkę, jeśli to konieczne.

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

Pomnożenie przez 1em może również przybliżyć coś do oryginalnej pracy z przykładami. Zasadniczo możesz przechowywać rzeczy bez jednostek, a następnie pomnażać je przez 1em, kiedy chcesz, aby jednostka się pojawiła. W ten sposób unika niektóre bezsensowne em proliferacji w moim pierwszym przykładzie:

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

Którędy większy sens głównie zależy od tego, czy produkcja będzie głównie w jednym urządzeniu, lub wszelkiego rodzaju różnych te (w tym brak).

Answer 2

Włóż je do zmiennej, więc $h1_size: 24em;

Answer 3

Trzeba użyć interpolacji ciąg tak: # {$ zmienna} em

Oto referencyjny: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

Answer 4

Można usunąć przestrzeń z +

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

wyjście będzie .

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