CODEWITHSUNDEEP
csssassscss-mixins
Lewis Carville
Lewis Carville

Reputation: 127

How to pass multiple args to a Sass Mixin: a list and named variable

I'm using a mixin for outputting a default transition timing-function, duration and a variable number of properties.

Current Mixin:

@mixin fast-transition($properties...) { 
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  @if length($properties) > 1 {
    transition-property: $properties;
  } @else {
    transition-property: all;
  }
  :global(.browser-ie) & {
    transition: none;
  }
}

Current Usage:

@include fast-transition(background-color, color);

Current Result:

.el {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color;
}
.browser-ie .el {
  transition: none;
}


What I'd like to be able to do is specify the usage of the transition: none code block, possibly through an @if statement.

Desired Mixin (Doesn't work)

@mixin fast-transition($properties..., $ieTransition) {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  @if length($properties) > 1 {
    transition-property: $properties;
  } @else {
    transition-property: all;
  }
  @if not ($ieTransition) {
    :global(.browser-ie) & {
      transition: none;
    }
  }
}

Usage: (Doesn't work)

@include fast-transition((background-color, color), $ieTransition);

Desired Output:

.el {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color;
}


Working Version - From Yunzen's Answer

@mixin fast-transition($ie: false, $props: "all") {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: #{$props};

  @if not($ie) {
    :global(.browser-ie) & {
      transition: none;
    }
  }
}

@include fast-transition($props: "background-color, color", $ie: true);

Upvotes: 0

Views: 995

Answers (2)

Chiara Ani
Chiara Ani

Reputation: 1093

Have you tried this?

@mixin fast-transition($ieTransition: false, $properties...) {
  ...
}
@include fast-transition(background-color, color, $ieTransition: some_value);

Upvotes: 0

yunzen
yunzen

Reputation: 33439

You must put the arbitrary arguments at the end of the mixin's arguments list (See the doc)

Try this instead: It uses named arguments in the @include arguments list and options arguments (doc) in the @mixin definition

@mixin fast-transition($ieTransition: false, $properties: "all") {
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: $properties;
  
  @if not($ieTransition) {
    :global(.browser-ie) & {
      transition: none;
    }
  }
}

to use it do this

.el-all {
  // use all for transition properties and no transition for IE
  @include fast-transition();
)
// or
.el-no-ie {
  // use $properties for transition properties and no transition for IE
  @include fast-transition($properties: 'background-color, color");
)
// or
.el-ie {
  // use $properties for transition properties and transition for IE
  @include fast-transition($properties: 'background-color, color", $ieTransition: true);
)

See this demonstration https://codepen.io/HerrSerker/pen/dyXEvWK?editors=1100

Upvotes: 1

Related Questions