WTF is a mixin? o_O

Is a group of CSS properties that can be reused throughout your stylesheet document.

Official Sass Documentation:

"Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left."

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

@mixin highlightBox {
    padding: 10px;
    font-weight: bold;
    color: white;
    background: red;   
}

Show us an example dude!

Mixin:

Helping you be a better developer with Sass mixins :)

@ricardozea

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

How do you use that thing?

@mixin highlightBox {
    padding: 10px;
    font-weight: bold;
    color: white;
    background: red;   
}

.highlight-box__cta {
    @include highlightBox;
    border-radius: 5px;
}

.highlight-box__customer-service {
    @include highlightBox;
    box-shadow: 1px 1px 2px rgba(black,.5);
}

Mixin:

Usage:

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

Oh! That's how!

@mixin highlightBox {
    padding: 10px;
    font-weight: bold;
    color: white;
    background: red;   
}

.highlight-box__cta {
    @include highlightBox;
    border-radius: 5px;
}

.highlight-box__customer-service {
    @include highlightBox;
    box-shadow: 1px 1px 2px rgba(black,.5);
}

.highlight-box__cta {
    padding: 10px;
    font-weight: bold;
    color: white;
    background: red;
    border-radius: 5px;
}

.highlight-box__customer-service {
    padding: 10px;
    font-weight: bold;
    color: white;
    background: red;
    box-shadow: 1px 1px 2px rgba(black,.5);
}

Mixin:

Compiles to:

Usage:

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

Alright, shows a real-life example amigo!

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

.container {
    width: 100px;
    height: 100px;
}

@mixin size( $width, $height: $width ) {
    width: $width;
    height: $height;
}

Mixin:

Compiled CSS 1:

.container {
   @include size(100px);
}

Usage 1:

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

.container {
    width: 100px;
    height: 60px;
}

@mixin size( $width, $height: $width ) {
    width: $width;
    height: $height;
}

Mixin:

Compiled CSS 2:

.container__logo {
   @include size(100px,60px);
}

Usage 2:

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

@ricardozea

Helping you be a better developer with Sass mixins :)

@font-face {
  font-family: "Font Normal";
  src: url("../fonts/font-normal.eot");
  src: url("../fonts/font-normal.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-normal.woff") format("woff"),
       url("../fonts/font-normal.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Italic";
  src: url("../fonts/font-italic.eot");
  src: url("../fonts/font-italic.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-italic.woff") format("woff"),
       url("../fonts/font-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Bold";
  src: url("../fonts/font-bold.eot");
  src: url("../fonts/font-bold.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-bold.woff") format("woff"),
       url("../fonts/font-bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Bold Italic";
  src: url("../fonts/font-bold-italic.eot");
  src: url("../fonts/font-bold-italic.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-bold-italic.woff") format("woff"),
       url("../fonts/font-bold-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

Would you believe me...

...if I tell you that those 36 lines of CSS can be written with

ONLY 4 LINES

of SCSS?

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

Like this

@include fontFace("Font Normal", '../fonts/font-normal');

@include fontFace("Font Italic" '../fonts/font-italic');

@include fontFace("Font Bold" '../fonts/font-bold');

@include fontFace("Font Bold Italic", '../fonts/font-bold-italic');

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

All Thanks to this mixin

@mixin fontFace($font-family, $file-path) {
  @font-face {
    font: {
      family: $font-family;
      weight: normal;
      style: normal;
    }
    src: url('#{$file-path}.eot'); //IE9 Compat Modes
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), //IE6-IE8
         url('#{$file-path}.woff') format('woff'), //Modern Browsers
         url('#{$file-path}.ttf') format('truetype'); //Safari, Android, iOS
  }
}

@include fontFace(fontName, 'path/to/font');

Usage:

@ricardozea

Helping you be a better developer with Sass mixins :)

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

One more time

@include fontFace("Font Normal", '../fonts/font-normal');

@include fontFace("Font Italic" '../fonts/font-italic');

@include fontFace("Font Bold" '../fonts/font-bold');

@include fontFace("Font Bold Italic", '../fonts/font-bold-italic');

@include fontFace(fontName, 'path/to/font');

Usage:

@ricardozea

Helping you be a better developer with Sass mixins :)

SCSS:

A mixin is a group of CSS properties that can be reused throughout your stylesheet document.

@font-face {
  font-family: "Font Normal";
  src: url("../fonts/font-normal.eot");
  src: url("../fonts/font-normal.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-normal.woff") format("woff"),
       url("../fonts/font-normal.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Italic";
  src: url("../fonts/font-italic.eot");
  src: url("../fonts/font-italic.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-italic.woff") format("woff"),
       url("../fonts/font-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Bold";
  src: url("../fonts/font-bold.eot");
  src: url("../fonts/font-bold.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-bold.woff") format("woff"),
       url("../fonts/font-bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Font Bold Italic";
  src: url("../fonts/font-bold-italic.eot");
  src: url("../fonts/font-bold-italic.eot?#iefix") format("embedded-opentype"),
       url("../fonts/font-bold-italic.woff") format("woff"),
       url("../fonts/font-bold-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@ricardozea

Helping you be a better developer with Sass mixins :)