Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: Mixins w/global default arguments

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

mixins_w_default_arguments.scss

SassMeister Gist

$border-radius: 3px !default;
$border-style: 1px solid red !default;
@mixin border($radius: $border-radius, $style: $border-style) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
border: $style;
}
.my-new-class {
@include border;
}
.my-other-class {
@include border(3px 3px 0 0, 1px solid orange);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment