Example(s) of using new SASS incorporation about wet-boew

[sylus]

Thought I would give an example of using a mix-in as well from native sass (http://sass-lang.com)

@mixin gradient($first, $second) {
  background: $second;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second');
  background: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
  background: -moz-linear-gradient(top,  $first,  $second);
}

.gradient {
  @include gradient(black, white);
}

This will compile into:

.gradient {
  background: white;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second');
  background: -webkit-gradient(linear, left top, left bottom, from(black), to(white));
  background: -moz-linear-gradient(top, black, white);
}

[pjackson28]

Why didn't the filter $first and $second get converted? Did it get fooled by the IE-specific CSS code?

[sylus]

Think it is a specific problem with ie, this talks about solutions and the problem:

http://hungrysquirrel.posterous.com/sass-mixin-for-ie-linear-gradient-filter

[sylus]

I got it working with a solution like this (think variables for ie filter has to be in format '#{$first}':

@mixin gradient($first, $second) {
  background: $second;
  background: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
  background: -moz-linear-gradient(top,  $first,  $second);
}
@mixin ie-gradient($first, $second) {
   filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$first}', endColorstr='#{$second}');
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$first}', endColorstr='#{$second}')"; 
}

.gradient {
  @include gradient(black, white);
  @include ie-gradient(black, white);
}

Rendered as:

.gradient {
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, from(black), to(white));
  background: -moz-linear-gradient(top, black, white);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='black', endColorstr='white');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='black', endColorstr='white')";
}