¿Cómo evito que Sass agregue espacios antes de las unidades de medida?

Question

Estoy intentando seguir this tutorial en el diseño de diseño receptivo, pero usando SASS/SCSS como mi lenguaje de especificación base.

A tal fin, he definido la siguiente 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; 
} 

Desafortunadamente, la salida de sass en formato CSS se ve así:

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

- con la unidad separada del valor por un espacio. Chrome rechaza estos valores como no válidos, y solo los usa si voy y elimino los espacios yo mismo.

¿Hay alguna forma de solucionar este problema modificando mi SCSS o pasando una opción al sass?

Hasta ahora, he intentado:

• colocar la unidad dentro del cálculo:
  
  • (font-size: ($h1_size/16em)) => Error sintaxis
  • (font-size: (($h1_size)em/16) =>font-size: 24 em/16; cuales es el mismo problema que estoy tratando de arreglar

Answer 1

puede pulsar el em en la definición $h1_size, que le permitirá simplemente dividir por 16 y tienen un resultado en ems.

Si ambos lados de la división están en em, su resultado será sin unidades. Puede multiplicar fácilmente por 1em para recuperar su unidad, si es necesario.

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

Multiplicando por 1em también puede hacer algo más cercano a su trabajo original ejemplo. En general, puede mantener las cosas sin unidades, luego solo multiplique por 1em cuando desee que aparezca la unidad. Esto evita algunos de los insustancial em proliferación en mi primer ejemplo:

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

qué dirección tiene más sentido en su mayoría sólo depende de si su salida será principalmente en una sola unidad, o todo tipo de diferentes queridos (incluyendo ninguno).

Answer 2

Coloque el em en la variable, por lo $h1_size: 24em;

Answer 3

Es necesario utilizar la interpolación de cadenas, así: # {$ variable} em

su referencia es: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

Answer 4

Se puede quitar el espacio con un +

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

salida se .

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