[Sass] Level 3: Mixin -- Ex

When to use MIXIN?

Better way to use MIXIN is when you deal with browser prefiex, for example:

@mixin transition($val...){
    -webkit-transition: $val;
    -moz-transition: $val;
    transition: $val;
}

Because when you use mixin, actually you just copy the mixin to the another css class, it is not efficent way to wirte css.

But if use it with browser prefix, it can save your typing and you can pass in variable, make it more dynamic.

Notice: $val..., the reason to use ... is because somtime you will passin the value like:

color 0.3s ease-in, background-color 0.5s ease-out

You have , inside, it will casuse problem if you don't give ... after $val.

There is another way to use ...

@mixin button($radius, $color){
   border-radius: $radius;
   color: $color;
}

$props = "4px, #ccc";

.btn-a {
    @include button($props...)
}

Sass is smart enought to set $radius to 4px and color to #ccc. But you need to make sure the order is correct.

Default value:

.mtn-select{
  @include field-border($top: 'top', $right: 'right', $bottom: '', $left:'left');
  @include filed-validation;
  @include filed-common;
  margin-top: 0px;
  & .md-select-icon{
    margin-right: 18px;
  }

}

@mixin field-border($top:top, $right:right, $bottom:bottom, $left:left){
  border-#{$top}: 1px solid rgba(0,0,0,0.12) !important;
  border-#{$left}: 1px solid rgba(0,0,0,0.12) !important;
  border-#{$right}: 1px solid rgba(0,0,0,0.12) !important;
  border-#{$bottom}: 1px solid rgba(0,0,0,0.12) !important;
}

 

INCLUDE

We've identified a set of properties that commonly appear in our stylesheet (sometimes with minor tweaks). Let's streamline the process of using these values by adding the commented lines to a mixin called assemble, then calling that mixin in .factory and.highrise.

// background: #fff;
// border: 1px solid #ccc;
// padding: 10px;

@mixin assemble{
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  }

.factory {
@include assemble
}
.highrise {
@include assemble
}

ARGUMENT

That's a good start, but we need the ability to change the background color. Alter the mixin to take an argument called $bg, which should then be set as the value of the background property. Pass#fff in for .factory and #797979 in for .highrise.

@mixin assemble {
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.factory {
  @include assemble;
}
.highrise {
  @include assemble;
}

Answer:

@mixin assemble($bg) {
  background: $bg;
  border: 1px solid #ccc;
  padding: 10px;
}

.factory {
  @include assemble(#fff);
}
.highrise {
  @include assemble(#797979);
}

DEFAULT ARGUMENT

The background color for declarations using assemble will most often be #fff. Add a default value to the $bg argument to reflect this discovery. Note: once the default value is set, remember to update your .factory @include.

@mixin assemble($bg) {
  background: $bg;
  border: 1px solid #ccc;
  padding: 10px;
}

.factory {
  @include assemble(#fff);
}
.highrise {
  @include assemble(#797979);
}

Answer:

@mixin assemble($bg:#fff) {
  background: $bg;
  border: 1px solid #ccc;
  padding: 10px;
}

.factory {
  @include assemble;
}
.highrise {
  @include assemble(#797979);
}

MULTIPLE ARGUMENTS

Some elements also need a nonstandard amount of padding. Create a second argument, $pad, with a default value of 10px. .factory uses the default value, but .highrise should have 20pxof padding on all sides.

@mixin assemble($bg: #fff) {
  background: $bg;
  border: 1px solid #ccc;
  padding: 10px;
}

.factory {
  @include assemble;
}
.highrise {
  @include assemble(#797979);
}

Answer:

@mixin assemble($bg: #fff , $pad:10px) {
  background: $bg;
  border: 1px solid #ccc;
  padding: $pad;
}

.factory {
  @include assemble;
}
.highrise {
  @include assemble(#797979, 20px);
}

KEYWORD ARGUMENTS

Given the number of people collaborating on this stylesheet, we should make the mixin call as clear as possible. Add $bg: and $pad: to the .highrise @include arguments, creating keyword arguments.

@mixin assemble($bg: #fff, $pad: 10px) {
  background: $bg;
  border: 1px solid #ccc;
  padding: $pad;
}

.factory {
  @include assemble;
}
.highrise {
  @include assemble(#797979, 20px);
}

Answer:

@mixin assemble($bg: #fff, $pad: 10px) {
  background: $bg;
  border: 1px solid #ccc;
  padding: $pad;
}

.factory {
  @include assemble;
}
.highrise {
  @include assemble($bg: #797979, $pad: 20px);
}

INTERPOLATING ARGUMENTS

A change request just came in: the border should only apply to one side of these elements. Add a required argument $side to the mixin and interpolate that value to the border property (passingleft as $side should create border-left: 1px solid #ccc, for instance). .factory borders should be on the left side, .highrise borders on the right. As a reminder, arguments without default values need to come before arguments with default values.

@mixin assemble($bg: #fff, $pad: 10px) {
  background: $bg;
  border: 1px solid #ccc;
  padding: $pad;
}

.factory {
  @include assemble;
}
.highrise {
  @include assemble($bg: #797979, $pad: 20px);
}

Answer:

@mixin assemble($side, $bg: #fff, $pad: 10px) {
  background: $bg;
  border-#{$side}: 1px solid #ccc;
  padding: $pad;
}

.factory {
  @include assemble(left);
}
.highrise {
  @include assemble(right, $bg: #797979, $pad: 20px);
}

VARIABLE ARGUMENTS

We're attempting to pass a comma-separated box-shadow value into our mixin as an argument, but we keep getting an error about the number of arguments. Alter $shadow to be a variable argument and accept the value below.

@mixin modal($shadow) {
  box-shadow: $shadow;
  border: 1px solid #ccc;
}

.modal {
  @include modal(inset 0 0 5px #000, 0 2px 5px #000);
}

Answer:

@mixin modal($shadow...) {
  box-shadow: $shadow;
  border: 1px solid #ccc;
}

.modal {
  @include modal(inset 0 0 5px #000, 0 2px 5px #000);
}