Sass Mixin lỗi cho IE lọc cụ thể như -ms-lọc

Question

Tôi đang cố gắng để tạo ra một nút mixin như thế này:

=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 

Khi tôi biên dịch sass, tôi nhận được lỗi này cho các dòng bắt đầu với - bộ lọc và -ms-filter:

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

Tôi chắc chắn đó là vị trí của tôi, nhưng tôi không chắc chắn cách viết chính xác. Nó hoạt động nếu tôi vượt qua các giá trị hex thay vì nhẹ hơn, sẫm màu hơn, bởi vì sau đó tôi có thể loại bỏ các = ký như vậy:!

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

Answer 1

Giải quyết nó như thế này, nhưng vẫn đang tìm kiếm gợi ý thay thế về cách tốt nhất. ..

=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 

Cú pháp cho Sass đã thay đổi kể từ khi câu trả lời này được đăng lần đầu. Cú pháp sass hiện đại (thụt) trông như thế này:

=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

Cập nhật cú pháp của bạn để sử dụng : thay vì = cho các định nghĩa tài sản:

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

Kiểm tra các SASS Reference, mặc dù những ví dụ là trong SCSS thay vì SASS indented style. Đầy đủ index of the SASS documentation.

Answer 3

Nội suy #{} không đôi khi hoạt động vì nó rút ngắn giá trị màu hex. Ví dụ: nó sẽ rút ngắn #334455 thành #345, vi phạm cú pháp bộ lọc.

SASS có chức năng mới trong phiên bản 3.2: ie-hex-str().

Dưới đây là cách tôi đã nhận nó để làm việc:

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