Why won't this SCSS mixin work?

[nixnerd]

Here is the CSS I originally wrote:

#gun:active #shell {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  margin-top: -70px;
  margin-left: -500px;
  width: 70px;

  -webkit-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s;
     -moz-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s;
      -ms-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s;
       -o-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s;
          transition: margin-top 0.1s, margin-left 0.2s, width 0.25s;
}

That works great. But… when I try to SASSify it… I run into problems.

Here is my mixin:

@mixin transition($property, $duration) {
  -webkit-transition: $property $duration;
     -moz-transition: $property $duration;
      -ms-transition: $property $duration;
       -o-transition: $property $duration;
          transition: $property $duration;
}

Here is the SCSS:

#gun:active #shell {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  margin-top: -70px;
  margin-left: -500px;
  width: 70px;

  @include transition(margin-top, 0.1s);
  @include transition(margin-left, 0.2s);
  @include transition(width, 0.25s);
}

Here is the output:

#gun:active #shell {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  margin-top: -70px;
  margin-left: -500px;
  width: 70px;

  -webkit-transition: margin-top 0.1s;
  -moz-transition: margin-top 0.1s;
  -ms-transition: margin-top 0.1s;
  -o-transition: margin-top 0.1s;
  transition: margin-top 0.1s;

  -webkit-transition: margin-left 0.2s;
  -moz-transition: margin-left 0.2s;
  -ms-transition: margin-left 0.2s;
  -o-transition: margin-left 0.2s;
  transition: margin-left 0.2s;

  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -ms-transition: width 0.25s;
  -o-transition: width 0.25s;
  transition: width 0.25s;
}

[Alen]

Can someone please explain what #{} is doing here?

Variable interpolation.

Sass syntax doesn’t have brackets. http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html

[Josh]

Why not just use Compass, if you don’t mind my asking?

[Alen]

Just look it up in Docs and view source: http://compass-style.org/reference/compass/css3/transition/

[__]

The tradeoff is, it’s bulky. For example, some things only need a webkit prefix. But I didn’t want to write a bunch of mixins for every prefixable attribute. Maybe I should?

Have another look at @CrocoDillon’s post. Each of your “property” mixins will call the “prefixer” mixin, specifying only the vendors it needs. Definitely the way to go.

(This is how Bourbon does it; I’m pretty sure Compass does the same.)

[Author]

Posts