Skip to content

Instantly share code, notes, and snippets.

@ABooooo
Last active November 1, 2018 08:16
Show Gist options
  • Save ABooooo/73601c43d56f9150086f to your computer and use it in GitHub Desktop.
Save ABooooo/73601c43d56f9150086f to your computer and use it in GitHub Desktop.
mixins with arguments
// regular arguments
@mixin customBorder ($width, $color, $style) {
border: {
width: $width;
color: $color;
style: $style;
}
}
#mycontainer {
@include customBorder (3px, blue, dashed);
}
// arguments with default
@mixin customBorder2 ($width: 1px, $color: red, $style: solid) {
border: {
width: $width;
color: $color;
style: $style;
}
}
// use default values
#mycontainer {
@include customBorder2;
}
// or pass new values
#mycontainer {
@include customBorder2(3px, blue, dashed);
}
// arguments with defaults and parameters
@mixin customBorder3 ($width, $color: red, $style: solid) {
border: {
width: $width;
color: $color;
style: $style;
}
}
// $width must always be defined
#mycontainer {
@include customBorder3 (1px);
}
// or
// $width must always be defined and change blue to red
#mycontainer {
@include customBorder3 (1px, red);
}
// or
// $width must always be defined and change blue to red and change line type
#mycontainer {
@include customBorder3 (1px, red, dashed);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment