Sass Mixin Błąd na konkretne filtry IE jak -ms filtrem

Question

Próbuję zrobić przycisk wstawek tak:

=default_button(!lighter, !darker) 
    :border= 1px !lighter solid 
    :background-color #e3e3e3 
    :background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, #d0581e 
    :background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 #d0581e 
    :filter= progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker') 
    :-ms-filter= "progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker')" 
    :zoom 1 
    :margin 0 0 0 0 
    :width auto 
    :padding 2px 14px 2px 14px 
    :border-radius 10px 
    :-webkit-border-radius 10px 
    :-moz-border-radius 10px 
    :color #FFF 

Kiedy skompilować Sass, otrzymuję ten błąd na linii począwszy - filtr i -ms filtr:

SASS::SyntaxError: Expected rparen token, was single_eq token

Jestem pewien, że moja rozmieszczenie = 's, ale nie jestem do końca pewien, jak napisać go poprawnie. To działa, gdy mijam wartości hex zamiast lżejsze, ciemniejszy, bo wtedy mogę usunąć znak = tak:!

:filter progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e') 
:-ms-filter "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')" 

Answer 1

rozwiązany w ten sposób, ale wciąż szuka alternatywnych propozycji na najlepszej drodze. ..

=default_button(!lighter, !darker) 
    text-shadow= 1px 1px 3px darken(!darker, 8) 
    border= 1px !darker solid 
    background-color= !lighter 
    background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, !darker 
    background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 !darker 
    -ms-filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{!lighter}', endColorstr='#{!darker}')" 
    :zoom 1 
    :margin 0 0 0 0 
    :width auto 

Składnia Sassa uległa zmianie od czasu pierwotnej publikacji tej odpowiedzi. The (wcięcie) składnia nowoczesny Sass wygląda następująco:

=default_button($lighter, $darker) 
    text-shadow: 1px 1px 3px darken($darker, 8) 
    border: 1px $darker solid 
    background-color: $lighter 
    background: -webkit-gradient(linear, 0 0, 0 100%, from($lighter), to($darker)) repeat-x, $darker 
    background: -moz-linear-gradient(90deg, $darker, $lighter) repeat-x scroll 0 0 $darker 
    -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$lighter}', endColorstr='#{$darker}')") 
    zoom: 1 
    margin: 0 0 0 0 
    width: auto 

Answer 2

Aktualizacja składni użyć : zamiast = dla definicji własności:

=mixin($variable) 
    property: value 
    property: $variable 

Sprawdź SASS Reference, choć przykłady są w SCSS zamiast SASS indented style. Pełna index of the SASS documentation.

Answer 3

Interpolacja #{} nie działa czasami, ponieważ skraca wartości kolorów szesnastkowych. Na przykład skróci to #334455 do #345, co spowoduje przerwanie składni filtru.

SASS ma nową funkcję w wersji 3.2: ie-hex-str().

Oto jak mam go do pracy:

filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='") 
+ ie-hex-str($start) 
+ unquote("', endColorstr='") 
+ ie-hex-str($stop) 
+ unquote("',GradientType=0)"); /* IE6-9 */ 

• SASS Changelog
• SASS Functions