Prevenir Sass de hacer cotizaciones arround valor

Question

estoy tranquila nuevo a Sass ... Quiero crear un poco de CSS con los valores porcentuales como:

width : 13%; 

El valor es el resultado de una operación número Sass. Escribir este código SCSS

width : $main-width + "%" 

genera esto:

width : "13%"; 

CSS, lo que realmente no está funcionando, ya que debe ser:

width : 13%; 

escribir

width : $main-width %; 

resultados en

width : 13 "%" 

lo que también lleva a una regla css que no funciona. ¿Hay alguna manera de hacer que Sass imprima 13% sin formato, sin comillas?

Answer 1

Piense en las unidades en Sass como variables en álgebra en lugar de simplemente concatenar cadenas.

En álgebra: 2x * 3 = 6x

En Sass: 13 * 1% = 13%

utilizar este enfoque para hacer operaciones matemáticas más avanzadas. 10px * 3px = 30px*px

Pero px*px no es una unidad de CSS válido por lo que tiene que cancelar una dividiendo por 1px

30px*px/1px = 30px

Esperanza esto ayuda más allá de su pregunta original.

Answer 2

unquote("%") hace el truco.

Answer 3

Puedes probar #. que tenía un problema similar con un mixin y enumera

@mixin p($value, $position: a, $unit: $rhythm-unit){ 
    $vallist:(); 
    @if length($value) > 1 { 
    @each $sval in $value { 
     $sval: 0 !default; 
     $vallist: append($vallist, #{$sval}#{$unit}); 
    } 
    padding: $vallist; 
    } @else{ 
    @if $position == t { 
     padding-top: $value+$unit; 
    } @else if $position == r { 
     padding-right: $value+$unit; 
    } @else if $position == b { 
     padding-bottom: $value+$unit; 
    } @else if $position == l { 
     padding-left: $value+$unit; 
    } @else { 
     padding: $value+$unit; 
    } 
    } 
} 

El problema era

append($vallist, $sval+$unit); 

citas Siempre añadido en torno a estos valores por ejemplo "1rem" "1.25rem" que no es una sintaxis css correcta.

lo sustituyó con:

append($vallist, #{$sval}#{$unit}); 

Como se puede ver que uso # -sign con {} + y no es necesario nada más. Lo muy interesante aquí es que esto solo aparece con listas/agregar como se puede ver en mi exterior. Puede encontrarlo en la página de referencia sass Division and slash Si desea utilizar variables junto con un CSS simple, puede usar # {} para insertarlas.Por ejemplo: p { $ font-size: 12px; $ línea-altura: 30px; font: # {$ font-size}/# {$ line-height}; }

creo que sirve