Zapobiegaj Sass od podejmowania cytaty arround wartości

Question

jestem spokojny nowego do Sass ... Chcę stworzyć jakiś css o wartościach procentowych, takich jak:

width : 13%; 

wartość jest wynikiem operacji numer Sass. Pisząc ten

width : $main-width + "%" 

kod SCSS generuje to:

width : "13%"; 

css, co faktycznie nie działa, ponieważ powinno być:

width : 13%; 

pisanie

width : $main-width %; 

Skutkuje

width : 13 "%" 

co prowadzi również do niedziałającej reguły css. Czy istnieje sposób, aby Sass wydrukował 13% zwykłego, bez cytatów?

Answer 1

Pomyśl o jednostkach w zmiennych typu Sass w algebrze zamiast po prostu łącząc łańcuchy.

W algebrze: 2x * 3 = 6x

W Sass: 13 * 1% = 13%

Użyj tego zrobić podejście do bardziej zaawansowanych matematyki. 10px * 3px = 30px*px

Ale px*px nie jest ważna jednostka CSS więc trzeba anulować jeden przez podzielenie przez 1px

30px*px/1px = 30px

Hope this helps poza oryginalnym pytanie.

Answer 2

rozwiązuje problem.

Answer 3

Możesz spróbować #. Miałem podobny problem z wstawek i wymienia

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

Problemem było

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

Zawsze dodane cytaty wokół tych wartości, na przykład "1rem" "1,25rem", co nie jest poprawną składnią css.

Wymieniłem go:

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

Jak widać używam # -znak z {} i + to nie jest konieczne dłużej. Bardzo interesujące jest to, że pojawia się tylko z listami/dopisywaniem, jak można zobaczyć w mojej zewnętrznej. Można go znaleźć na stronie odniesienia sass Division and slash Jeśli chcesz używać zmiennych wraz ze zwykłym CSS /, możesz użyć # {} do wstawienia ich.Na przykład: p { $ rozmiar czcionki: 12 pikseli; $ wysokość linii: 30 pikseli; czcionka: # {$ font-size}/# {$ line-height}; }

Nadzieja pomaga