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