Set default values for mixins

When using mixins that require arguments, it is a best practice to always specify a default value for each argument. There are a number of good reasons as to why you should do this. The leading reason is to reduce duplication when including this mixin into a selector.

It is quite probable that the mixin you are using will reuse the same values a number of times with slight variations. Having to always search through previous code to remember what common values you applied last is time consuming and prone to mistakes. Using a good default strategy will reduce time and code error. This is why I have written the add-border mixin as such:

@mixin add-border(
    $border-position: all,
    $border-size: 1px,
    $border-pattern: solid,
    $border-color: $black) {

  @if $border-position == $border-position-all {
    border: $border-size $border-pattern $border-color;
  }
  @else {
    border-#{$border-position}: $border-size
    $border-pattern $border-color;
  }
}

When we include the mixin into our CSS as such:

.block {
    width: 100%;
    padding: 5px;
    display: block;
    background-color: transparent;
    overflow: hidden;
    height: auto;
}

.block-border {
    @include add-border;
}

The above example includes the mixin using the default values but what if we wanted a border that was 2 pixels dotted and gray in all directions? How would we include our mixin to incorporate the different parameters? Here is an example:

.block {
    width: 100%;
    padding: 5px;
    display: block;
    background-color: transparent;
    overflow: hidden;
    height: auto;
}

.block-border {
    // This will list all the parameters and pass them to the mixin
    @include add-border(all, 2px, dotted, $gray);
}

// or

.block-border {
    // Although this is a more verbose example, it does allow for other developers to be able to better understand the information that is being passed to mixin
    @include add-border(
        $border-position: all,
        $border-size: 2px,
        $border-pattern: dotted,
        $border-color: $gray);
}

Another scenario is when we only require a change to some of the parameters and not all of them. For example, if we need a top border that is a light gray color, this is how we would implement it:

.block {
    width: 100%;
    padding: 5px;
    display: block;
    background-color: transparent;
    overflow: hidden;
    height: auto;
}

.block-border {
    @include add-border(all, 2px, dotted, $gray);
}

.non-semantic-class-name-top-border-light-gray {
    @include add-border($border-position: top,
                        $border-color: lighten($gray, 30%));
}

As you can see, we only pass the parameters that we want changed and all the other parameters are driven from the default parameters in the mixin. The above sass file will compile to css as such:

.block {
    width: 100%;
    padding: 5px;
    display: block;
    background-color: transparent;
    overflow: hidden;
    height: auto;
}

.block-border {
    border: 2px dotted #7F7F7F;
}

.top-border-light-gray {
    border-top: 1px solid #CCCCCC;
}