Complex Sass mixins with defaults and multiple arguments

Sass Mixins

SASS mixins are a very handy way to create snippets of CSS that can easily be reused and updated. In a recent project I needed to add some CSS transitions to several elements. A mixin seemed like the ideal way to do this, but as you’ll see it got complex fast…

Basic Sass Mixin

A simple start

Initially, my goal was to apply the same transition to several elements in case I wanted to tweak the timing function or other details in the future.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Mixin */
@mixin transition {
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: ease;
}

/* Sass declaration */
#myhtmlelement{ @include transition; }

/* Resulting CSS */
#myhtmlelement {
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: ease; }

Passing Arguments to Sass Mixins

As I built my interface things progressed and I needed to have a little finer control over the properties that were transitioning. In itself this is not a complex requirement. It seems as simple as this…

1
2
3
4
5
6
/* Mixin (simplified, removed
        unchanged properties) */


@mixin transition($property) {
    transition-property:$property;
}

Default values for arguments to Sass Mixins

That’s fine enough, but now I need to go back to all my @include declarations and add “all” or some other property. If I only need to fine tune one or two locations in a complex web application it would really be nice to have a default value for $property. Unfortunately the docs didn’t seem to be completely clear on how to do that, but it only took a little experimentation to find the solution.

1
2
3
4
/* Mixin */
@mixin transition($property:all) {
    transition-property:$property;
}

Now we have something that works like this…

1
2
3
4
5
6
7
8
9
/* Sass declarations */
#myhtmlelement1{ @include transition; }
#myhtmlelement2{ @include transition(width); }

/* Resulting CSS */
#myhtmlelement1 {
  transition-property: all; }
#myhtmlelement2 {
  transition-property: width; }

Passing multiple values to single argument with Sass Mixins

All done right? Well, there’s still room for the wheels to come off. As I continued coding along the time came when I needed to transition multiple properties of an element, but not all. Fortunately, Sass allows you to pass a list to a single property by adding an ellipsis after the property.

1
2
3
4
5
6
7
8
9
10
11
12
/* Mixin */
@mixin transition($property...) {
    transition-property:$property;
}

/* Sass declarations */
#myhtmlelement{
    @include transition(width, opacity); }

/* Resulting CSS */
#myhtmlelement {
  transition-property: width, opacity; }

Perfect! Well almost. Now all our declarations that rely on the default values are broken again!

Passing Complex or Blank Values With Defaults to Mixins

It seems like it should be possible to combine the ellipsis and the default value, but in my testing Sass was not happy with any combination. But that’s ok, lets come at this from another angle. In the process we can make it possible to handle blank defaults and more complex arguments. If we use Sass to evaluate the property we can actually pass a string to the mixin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Mixin */
@mixin transition($property:all) {
    transition-property:#{$property};
}

/* Sass declarations */
#myhtmlelement1{ @include transition; }
#myhtmlelement2{
   @include transition("width, opacity"); }

/* Resulting CSS */
#myhtmlelement1 {
  transition-property: all; }
#myhtmlelement2 {
  transition-property: width, opacity; }

This code also works in the case of allowing a blank default value for cases where that makes sense, just use…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Mixin */
@mixin mymixin($property:"") {
    display:#{$property};
}

/* Sass declarations */
#myhtmlelement1{ @include mymixin; }
#myhtmlelement2{
   @include mymixin(block); }

/* Resulting CSS */
#myhtmlelement1 { }
#myhtmlelement2 {
  display: block; }

More Info

More information on passing variable numbers of arguments to Sass mixins.

Category(s): css, Sass
Tags: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

 

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free