Impedire Sass dal fare citazioni arround valore

Question

io sono tranquillo di nuovo da Sass ... voglio creare un po 'di CSS con valori percentuali come:

width : 13%; 

Il valore è il risultato di un'operazione di numero di sass. Scrivendo questo codice SCSS

width : $main-width + "%" 

genera questo:

width : "13%"; 

css, ciò che non è in realtà di lavoro perché dovrebbe essere:

width : 13%; 

scrittura

width : $main-width %; 

risultati in

width : 13 "%" 

ciò che porta anche a una regola css non funzionante. C'è un modo per fare in modo che Sass stampa il 13% in modo semplice, senza virgolette?

Answer 1

Pensa a unità in variabili simili a Sass in algebra invece di concatenare semplicemente stringhe.

In algebra: 2x * 3 = 6x

In Sass: 13 * 1% = 13%

utilizzare questo approccio per fare la matematica più avanzata. 10px * 3px = 30px*px

Ma px*px non è un'unità valida CSS in modo da avere per annullare uno su dividendo per 1px

30px*px/1px = 30px

Spero che questo aiuti oltre la vostra domanda originale.

Answer 2

unquote("%") fa il trucco.

Answer 3

Si potrebbe provare #. Ho avuto un problema simile con un mixin ed elenca

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

Il problema era

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

lo cita sempre aggiunto in tutto questi valori per esempio "1rem" "1.25rem" che non è una sintassi css corretta.

ho sostituito con:

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

Come si può vedere che uso # -sign con {} e + non più necessario. Il molto interessante qui è che questo appare solo con liste/append come puoi vedere nel mio altro esterno. È possibile trovarlo nella pagina di riferimento sass Division and slash Se si desidera utilizzare variabili insieme a un semplice CSS /, è possibile utilizzare # {} per inserirli.Ad esempio: p { $ font-size: 12px; $ line-height: 30px; font: # {$ font-size}/# {$ line-height}; }

Speranza che aiuta