Hash in front of a SASS argument

Question

I was wondering what was the difference between :

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

and

@mixin transition($args...) {
  -webkit-transition: #{$args};
  -moz-transition: #{$args};
  -ms-transition: #{$args};
  -o-transition: #{$args};
  transition: #{$args};
}

what is the purpose of having an # in front of the argument ?

Answer 1

The #{} syntax will interpolate the value in the curly braces into a string. This is useful, for example, in the following situations, when your variable only makes up part of the string. eg:

@mixin background-image($directory) {
    background-image: /#{$directory}image.jpg;
}

In this way, the SASS interpreter understands where the variable $directory ends.

If you were to do it this way, the compiler would get confused:

@mixin background-image($directory) {
    background-image: $directoryimage.jpg;
}

In your given example, it is not needed. Both versions would produce the same results.

You can do this outside of mixins as well. Consider this example using a for loop:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Which would produce:

.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }