Last active
November 1, 2018 08:16
-
-
Save ABooooo/73601c43d56f9150086f to your computer and use it in GitHub Desktop.
mixins with arguments
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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