css - libreria - Sass Mixin Error para filtros específicos de IE como-ms-filter

underscore empty object

Question

Estoy tratando de hacer un botón mezclando así:

=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

Cuando compilo el Sass, recibo este error para las líneas que comienzan con -filter y -ms-filter:

SASS :: SyntaxError: el token de rparen esperado, era el token single_eq

Estoy bastante seguro de que es mi ubicación de los = ''s, pero no estoy exactamente seguro de cómo escribirlo correctamente. Funciona si paso los valores hexadecimales en lugar de! Más claro,! Más oscuro, porque entonces puedo eliminar el signo = así:

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

Answer 1

Actualice su sintaxis para usar : lugar de = para las definiciones de propiedad:

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

Verifique la referencia de SASS , aunque los ejemplos están en SCSS en lugar de SASS con sangría . Índice completo de la documentación de SASS .

Answer 2

La interpolación #{} no funciona a veces porque acorta los valores de color hexadecimales. Por ejemplo, acortará #334455 a #345 , lo que rompe la sintaxis del filtro.

SASS tiene una nueva función en la versión 3.2: ie-hex-str() .

Así es como lo hice funcionar:

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

• SASS Changelog
• Funciones SASS

Answer 3

Resuelto de esta manera, pero sigue buscando sugerencias alternativas de la mejor manera ...

=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

La sintaxis de Sass ha cambiado desde que esta respuesta se publicó originalmente. La sintaxis moderna de sass (con sangría) se ve así:

=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