Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Advanced Sass Concepts Advanced Mixin Arguments

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
Posted by SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Create a mixin with multiple lists as input arguments without using the space separated list technique.

  1. ¿how can I create a mixin with multiple lists as input arguments without using the space separated list technique (i.e using $arguments1..., $arguments2...)?

  2. ¿How can I input the arguments on the @include code without using space separated lists?

2 Answers

Gerrit Verhaar
Gerrit Verhaar
17,742 Points
Gerrit Verhaar
Gerrit Verhaar
17,742 Points

Got you. This makes it complicated. I used the answer given in this link: http://stackoverflow.com/questions/21418566/pass-sass-list-to-mixin-with-multiple-arguments to find the answer.

It would be something like this:

@mixin make_rainbow($size,$col){
  rainbow_#{$col} {
    color: $col;
    height: $size;
    width: $size;
  }
}

@mixin rainbow_size($size-color...) {
    @each $value in $size-color {
      @include make_rainbow(nth($value,1),nth($value,2));
    }
}

// with a single parameter
@include rainbow_size((10px, red));
// or with multiple parameters
@include rainbow_size((15px, green), (20px, blue), (30px, yellow));

So you would need a extra mixin to split the values.

Gerrit Verhaar
Gerrit Verhaar
17,742 Points
Gerrit Verhaar
Gerrit Verhaar
17,742 Points

Hi Sergio,

the mixin declaration specifies if you need to use commas or spaces. If you use the ... you expect multiple input arguments separated by a comma. Definition would be like this:

@mixin rainbow ($colors...)

At the include you would use:

@include rainbow(red, orange, yellow, green);

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points
SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Hi Gerrit!

Thank you for your answer.

What I'm trying to figure out is how to do something like @mixin rainbow_size(@size_of_color..., @color...) and most importantly, how to write the @include statement with this type of declaration.