Sass Mixin Ошибка для специфических фильтров IE, таких как -ms-filter - PullRequest
Новая
       38

Sass Mixin Ошибка для специфических фильтров IE, таких как -ms-filter

16 голосов
/ 30 июля 2010

Я пытаюсь сделать микширование кнопки следующим образом: 

=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

Когда я компилирую sass, я получаю эту ошибку для строк, начинающихся с -filter и -ms-filter:

SASS :: SyntaxError: Ожидаемый токен rparen, был токен single_eq

Я почти уверен, что это мое расположение символов =, но я не совсем уверен, какнапиши правильно.Это работает, если я передаю шестнадцатеричные значения вместо! Светлее,! Темнее, потому что тогда я могу удалить знак = следующим образом: 

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

Ответы [ 3 ]

36 голосов
/ 30 июля 2010

Решил это так, но все еще искал альтернативные предложения о наилучшем способе ... 

=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

Синтаксис для Sass изменился с тех пор, как этот ответ был первоначально опубликован.Современный синтаксис sass (с отступом) выглядит следующим образом: 

=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
11 голосов
/ 14 августа 2012

Интерполяция #{} иногда не работает, потому что сокращает шестнадцатеричные значения цвета.Например, он сократит #334455 до #345, что нарушает синтаксис фильтра.

SASS имеет новую функцию в версии 3.2: ie-hex-str().

Вот как я получилчтобы это работало: 

filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")
+ ie-hex-str($start)
+ unquote("', endColorstr='")
+ ie-hex-str($stop)
+ unquote("',GradientType=0)"); /* IE6-9 */
1 голос
/ 31 июля 2010

Обновите свой синтаксис, чтобы использовать : вместо = для определения свойств: 

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

Проверьте SASS Reference , хотя примеры приведены в SCSS, а не SASS с отступом .Полный указатель документации SASS .

...