SASS Mixin Arguments

Question

I am passing multiple arguments in the mixin below. I am calling the mixin from multiple places in my CSS files; sometimes all the args need to be specified, other times only a few. Ruby allows you to pass an optional args using a hash. Is there such an equivalent in SASS, or this obviated by the fact that named arguments can be passed in any order, and arguments with default values can be omitted?

@mixin three-column-header-layout($background_color: #EEEEEE, $left_width: 25%, $mid_width: 50%, $right_width: 25%, $left_line_height: 40px, $mid_line_height: 40px, $right_line_height: normal, $column_height: 40px) {
  .wrapper {
    margin: 0 auto;
    width: 100%;
    overflow: hidden; 
  } 

  .middleCol {
    float: left;
    background: $background_color;
    height: $column_height;
    width: $mid_width;
    display: inline;
    line-height: $mid_line_height; 
  }

  .leftCol {
    background: $background_color;
    height: $column_height;
    width: $left_width;
    float: left;
    line-height: $left_line_height; 
  }

  .rightCol {
    background: $background_color;
    height: $column_height;
    width: $right_width;
    float: left; 
    line-height: $right_line_height;
  }
}

score 1 · Accepted Answer · answered Aug 24 '11 at 02:24

1

Sass's only data structure as of 3.1.7 is lists.

As you mentioned you can include your mixin using any combination of named arguments only if all arguments that are not passed have default values.

answered Aug 24 '11 at 02:24

Rhysyngsun

951
6
17

score 0 · Answer 2 · answered Oct 15 '14 at 13:16

Sass 3.3 added the mapping data structure and you can pass them as arguments to mixins like this:

$options:
  ( background_color: red
  , right_width: 30%
  , left_width: 20%
  );

.foo {
  @include three-column-header-layout($options...);
}

Note, however, that one could also specify the arguments like so (this may have been a 3.2 feature):

.foo {
  @include three-column-header-layout($background_color: red, $right_width: 30%, $left_width: 20%)
}

SASS Mixin Arguments

2 Answers2