Search code examples
hashsassargument-passingnamed-parameters

SASS Mixin Arguments


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;
  }
}

Solution

  • 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.