Sass/SCSS

Advanced Sass

Mixins (@include)
Inheritance (@extend)
Directives
Maps

Advanced Sass Mixins

Variables let you reuse single values.

Mixins let you reuse blocks of styles.

Mixins Use

CSS

.header {
  border-radius: 5px;
  padding: 5px 20px;
}

.footer {
  border-radius: 5px;
  padding: 5px 20px;
}

.feature a {
  border-radius: 5px;
  padding: 5px 20px;
}

.content {
  border-radius: 5px;
  padding: 5px 20px;
}

Sass

@mixin rounded-box {
  border-radius: 5px;
  padding: 5px 20px;
}

.header {
  @include rounded-box;
}

.footer {
  @include rounded-box;
}

.feature a {
  @include rounded-box;
}

.content {
  @include rounded-box;
}

Mixins Setup

@mixin rounded-box {
  border-radius: 5px;
  padding: 5px 20px;
}

.header {
  @include rounded-box;
  color: $header-color;
  // ...
}

.footer {
  @include rounded-box;
  // ...
}

.feature a {
  @include rounded-box;
  // ...
}

.content {
  @include rounded-box;
  // ...
}

We define a mixin with the @mixin directive.
We reference a mixin with the @include directive.
Mixins must be defined before they're referenced.
Mixins can be used with any other style rules.
You can nest within mixins just like you can elsewhere.
Mixins accept optional arguments.

Mixins Output

Sass

$header-color: #455667;

@mixin rounded-box {
  border-radius: 5px;
  padding: 5px 20px;
}

.header {
  @include rounded-box;
  color: $header-color;
}

.footer {
  @include rounded-box;
}

.feature a {
  @include rounded-box;
}

.content {
  @include rounded-box;
}

CSS

.header {
  border-radius: 5px;
  padding: 5px 20px;
  color: #455667;
}

.footer {
  border-radius: 5px;
  padding: 5px 20px;
}

.feature a {
  border-radius: 5px;
  padding: 5px 20px;
}

.content {
  border-radius: 5px;
  padding: 5px 20px;
}

Mixins Arguments

Mixins are great for repeated blocks of styles
where the values differ from case to case.

Sass

@mixin rounded-corners($radius) {
  -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
          border-radius: $radius;
}

.header {
  @include rounded-corners(5px);
  // ...
}

.footer {
  @include rounded-corners(10px);
  // ...
}

CSS

.header {
  -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
          border-radius: 5px;
  /* ... */
}

.footer {
  -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
          border-radius: 10px;
  /* ... */
}

Mixins Argument Defaults

You can also set an argument's default value,
making it optional to pass one in.

Sass

@mixin rounded-corners($radius: 5px) {
  -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
          border-radius: $radius;
}

.header {
  @include rounded-corners;
  // ...
}

.footer {
  @include rounded-corners(10px);
  // ...
}

CSS

.header {
  -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
          border-radius: 5px;
  /* ... */
}

.footer {
  -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
          border-radius: 10px;
  /* ... */
}

Mixins Multiple Arguments

Comma separated, order matters.

Sass

@mixin rounded-box($radius, $padding) {
  border-radius: $radius;
  padding: $padding;
}

.header {
  @include rounded-box(5px, 20px);
  color: $header-color;
  // ...
}

.footer {
  @include rounded-box(20px, 40px);
  // ...
}

CSS

.header {
  border-radius: 5px;
  padding: 20px;
  /* ... */
}

.footer {
  border-radius: 20px;
  padding: 40px;
  /* ... */
}

Mixins Optional Arguments

Optional arguments (ones with defaults) must be last in the set.

Sass

@mixin rounded-box($radius: 5px, $padding: 20px) {
  border-radius: $radius;
  padding: $padding;
}

@mixin content($color, $font-size: 12px) {
  color: $color;
  font-size: $font-size;
}

.header {
  @include rounded-box;
  @include content(#aaa, 24px);
  // ...
}

.footer {
  @include rounded-box(20px, 40px);
  @include content(#ccc);
  // ...
}

CSS

.header {
  border-radius: 5px;
  padding: 20px;
  color: #aaa;
  font-size: 24px;
  /* ... */
}

.footer {
  border-radius: 20px;
  padding: 40px;
  color: #ccc;
  font-size: 12px;
  /* ... */
}

Mixins Keyword Arguments

Order doesn't matter!

@mixin rounded-box($radius: 5px, $padding: 20px) {
  border-radius: $radius;
  padding: $padding;
}

.header {
  @include rounded-box($padding: 10px, $radius: 10px);
}

.footer {
  @include rounded-box($padding: 40px);
}

Mixin Variable Interpolation

Sass

@mixin toolbar-border($side, $width: 2px) {
  border-#{$side}: $width solid $toolbar-border;
}

.sidebar--left {
  @include toolbar-border("right");
}

.sidebar--right {
  @include toolbar-border("left");
}

CSS

.sidebar--left {
  border-right: 2px solid #213213;
}

.sidebar--right {
  border-left: 2px solid #213213;
}

Mixins Margin & Padding

@mixin margin--horz($left, $right: $left) {
  margin-left: $left;
  margin-right: $right;
}

@mixin margin--vert($top, $bottom: $top) {
  margin-bottom: $bottom;
  margin-top: $top;
}

.module { @include margin--vert(1em, 3em); }

Advanced Sass

Inheritance

Mixin Efficiency

Mixin Output

.header {
  border-radius: 5px;
  padding: 5px 20px;
  /* ... */
}

.footer {
  border-radius: 5px;
  padding: 5px 20px;
  /* ... */
}

.feature a {
  border-radius: 5px;
  padding: 5px 20px;
  /* ... */
}

.content {
  border-radius: 5px;
  padding: 5px 20px;
  /* ... */
}

Grouping Optimiztion

.header,
.footer,
.feature a,
.content {
  border-radius: 5px;
  padding: 5px 20px;
}

Advanced Sass Inheritance

@extend let's us group selectors together!

Sass

.message {
  border: 2px solid;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.message-alert {
  @extend .message;
  @include message-colors($yellow);
}

.message-error {
  @extend .message;
  @include message-colors($red);
}

.message-notice {
  @extend .message;
  @include message-colors($green);
}

CSS

.message,
.message-alert,
.message-error,
.message-notice {
  border: 2px solid;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.message-alert {
  border-color: goldenrod;
  color: goldenrod;
}

.message-error {
  border-color: darkred;
  color: darkred;
}

.message-notice {
  border-color: green;
  color: green;
}

Inheritance Setup

.message {
  border: 2px solid;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.message-alert {
  @extend .message;
  @include message-colors($yellow);
}

.message-error {
  @extend .message;
  @include message-colors($red);
}

.message-notice {
  @extend .message;
  @include message-colors($green);
}

Any CSS class can be extended.
We reference a class to extend with the @extend directive.
Extended classes DO NOT need to be defined before they're referenced.
Extensions can be used with any other style rules.
You can nest within extended classes just like you can elsewhere.

Inheritance Output

If we don't need to apply both .message AND .message-alert to an element, then why do we even need .message anymore?!

Sass

.message {
  border: 2px solid;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.message-alert {
  @extend .message;
  @include message-colors($yellow);
}

.message-error {
  @extend .message;
  @include message-colors($red);
}

.message-notice {
  @extend .message;
  @include message-colors($green);
}

CSS

.message,
.message-alert,
.message-error,
.message-notice {
  border: 2px solid;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.message-alert {
  border-color: goldenrod;
  color: goldenrod;
}

.message-error {
  border-color: darkred;
  color: darkred;
}

.message-notice {
  border-color: green;
  color: green;
}

Inheritance Placeholders

Placeholders are a special type of selector denoted by a %. They can be @extended but will never compile to the CSS on their own.

Sass

%message {
  border: 2px solid;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.message-alert {
  @extend %message;
  @include message-colors($yellow);
}

.message-error {
  @extend %message;
  @include message-colors($red);
}

.message-notice {
  @extend %message;
  @include message-colors($green);
}

CSS

.message-alert,
.message-error,
.message-notice, {
  border: 2px solid;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

.message-alert {
  border-color: goldenrod;
  color: goldenrod;
}

.message-error {
  border-color: darkred;
  color: darkred;
}

.message-notice {
  border-color: green;
  color: green;
}

@extend Module Setup

%btn {
    // ...
}

%btn--primary {
  background: $btn--primary--bg;
  border-color: $btn--primary--border;
  color: $btn--primary--color;
}
// ...

@mixin button-setup($type) {
  @extend %btn;
  @extend %btn--#{$type};

  &:focus { @extend %btn--#{$type}; }
  &:hover { @extend %btn--#{type}--hover; }

  &.disabled {
    @extend %disabled;
    &:hover { @extend %btn--#{$type}; }
  }
}

.btn--primary { @include button-setup("primary"); }
.btn--secondary { @include button-setup("secondary"); }
.btn--tertiary { @include button-setup("tertiary"); }

// background: $btn--#{$type}--bg; => Undefined variable: "$btn--"

@mixin VS @extend

so when do I use these...?

@mixin VS @extend

Are mixins without arguments bad?
Since they duplicate code, on both sides?

Sass

@mixin rounded-box {
  border-radius: 5px;
  padding: 5px 20px;
}

.header {
  @include rounded-box;
}

.footer {
  @include rounded-box;
}

.feature a {
  @include rounded-box;
}

.content {
  @include rounded-box;
}

CSS Output

.header {
  border-radius: 5px;
  padding: 5px 20px;
}

.footer {
  border-radius: 5px;
  padding: 5px 20px;
}

.feature a {
  border-radius: 5px;
  padding: 5px 20px;
}

.content {
  border-radius: 5px;
  padding: 5px 20px;
}

@mixin VS @extend

this better?

Sass

%rounded-box {
  border-radius: 5px;
  padding: 5px 20px;
}

.header {
  @extend %rounded-box;
}

.footer {
  @extend %rounded-box;
}

.feature a {
  @extend %rounded-box;
}

.content {
  @extend %rounded-box;
}

CSS

.header,
.footer,
.feature a,
.content {
  border-radius: 5px;
  padding: 5px 20px;
}

@mixin VS @extend

Is this better?

@extend Vomit

.header, .footer, .feature header a, .content, #taco ul a, .hipster dl,
[class="btn--"], .comment .comment__body .comment__quote, .card__header,
.card--standard, .card--transFooter, .card--featured, .card--scroller,
.card--static, .card--ebook, .card--transFooter .card__content
.container .wrapper, .link--fancy, #badthing, .nope.probably a.not span.good,
article header, .article .header, [class*='rabbit'], .party .at .codemash,
#hashtag, .dot, [class*="hooligans"], [class*='making'].up.classes.is-hard,
.julie + .rocks, #made.up, .bourbon, a div i span, [id="where-the-party"],
.this .could [class*="actually-happen"], #actually.it .happens.alot,
#seriously [class*="this"].is a.problem, .it .can.get #really .out-of-hand {
  border-radius: 5px;
  padding: 5px 20px;
}

Advanced Sass

Directives

Advanced Sass Directives

Functions
Conditionals
Loops

Directives Functions

Sass let's us define
custom functions.

@function fluidize($target, $context) {
  @return ($target / $context) * 100%;
}

.sidebar {
  width: fluidize(350px, 1000px);
  // => width: 35%;
}

We define a function with the @function directive.

We return a value with the @return directive.

We call a function by it's name and parens, passing arguments if needed.

Functions must be defined before they're referenced.

Functions accept arguments, they have the same rules as mixins (ie. defaults, order, keyword args, etc.)

Directives Conditionals

Sass let's us set
conditions.

$theme: light;

body {
  @if $theme == dark {
    background: #000;

  } @else if $theme == dark-mid {
    background: #4f4f4f;

  } @else if $theme == light-mid {
    background: #afafaf;

  } @else {
    background: #fff;
  }
}

We begin a conditon with the @if directive, then give it a comparison to evaluate
We have @else if for additional comparisons
And @else as a fallback if all prior comparisons evaluate to null or false

Comparators include:
* only compare numbers

== equal to
> greater than
>= greater than or equal to

!= not equal to
< less than
<= less than or equal to

Directives Each Loops

Sass let's us
loop through lists.

$themes: dark dark-mid light-mid light;

@each $theme in $themes {
  .theme-#{$theme} {
    @include theme-colors($theme);
  }
}

// .theme-dark {
//   background: #000;
//   color: #fff;
// }
// .theme-dark-mid {
//   background: #444;
//   color: #eee;
// }
// ...

The @each directive takes the form of:

@each $var in <list>

$var can be any variable name

<list> could be a list, or a variable storing one

Directives For Loops

Sass lets us
loop through # ranges.

@for $i from 1 through 12 {
  .grid-col-#{$i} {
    width: $grid-col-width * $i;
  }
}

// .grid-col-1 {
//   width: 60px;
// }
// .grid-col-2 {
//   width: 120px;
// }

Two forms of @for loops;
- @for $var from <start> through <end>
  Loop range includes start and end
- @for $var from <start> to <end>
  Loop range excludes end
$var can be any variable name
<start> and <end> can be an integer, or a variable storing one

Directives While Loops

Sass lets us
loop conditionally.

$i: 1;

@while $i <= 12 {
  .grid-col-#{$i} {
    width: $grid-col-width * $i;
  }

  $i: $i + 1;
}

// .grid-col-1 {
//   width: 60px;
// }
// .grid-col-2 {
//   width: 120px;
// }
// ...

The @while directives take the form of:
- @while <comparison>
It will output styles until the comparison statement returns false
You must manually update the variable you're comparing against
The <comparison> variable will often be an integer that you increment, but it could be any data type that you modify as you go

Advanced Sass

Maps

Advanced Sass Maps

Maps give us key-value pairings.

$mymap: (
  key1: value1,
  key2: value2,
  key3: value3
);

Maps must always be surrounded by parentheses.
Key-value pairs must always be comma separated.
Maps can be looped through or accessed via built-in map functions.

Advanced Sass Maps

Sass

$eye_color: (
  jeremy: #0989cb,
  beth: #8666ae,
  sarah: #02bba7
);

$font: (
  jeremy: Helvetica,
  beth: Verdana,
  sarah: Times
);

@each $key, $value in $eye_color {
  .#{$key} {
    background: $value;
    font-family: map-get($font, $key);
  }
}

CSS Output

.jeremy {
  background: #0989cb;
  font-family: Helvetica;
}

.beth {
  background: #8666ae;
  font-family: Verdana;
}

.sarah {
  background: #02bba7;
  font-family: Times;
}

Advanced Sass Map Functions

map-get($map, $key)
map-merge($map1, $map2)
map-remove($map, $keys...)
map-keys($map)
map-values($map)
map-has-key($map, $key)

Advanced Sass

Putting it all together.

Advanced Sass Icons

$icons: (
  checkmark: "\e600",
  plus:      "\e601",
  minus:     "\e602"
);

@each $name, $value in $icons {
  .icon--#{$name} {
    &:before { content: $value; }
  }
}

Advanced Sass Module Skins

$messages: (
  error:   (#d82d2d, #666),
  success: (#52bf4a, #fff),
  warning: (#c23435, #fff)
);

@each $name, $colors in $messages {
  $bg: nth($colors, 1);
  $color: nth($colors, 2);

  .message--#{$name} {
    background-color: $bg;
    color: $color;
  }
}

Advanced Sass Z-Indexes

$layers: (
  bottom: 1,
  middle: 5,
  top:    10
);

@mixin layer($name) {
  z-index: map-get($layers, $name);
};

.overlay {
  @include layer(middle);
}

.lightbox {
  @include layer(top);
}

Advanced Sass Font Sizes

$font--sizes: (
  ( base,  $base-font-size,     $base-line-height ),
  ( small, $base-font-size*.75, $base-line-height*.75 ),
  ( large, $base-font-size*1.5, $base-line-height*1.5 )
);

@mixin typeset($level) {
  @each $item in $font--sizes {
    @if $level == nth($item, 1) {
      font-size: nth($item, 2);
      line-height: nth($item, 3);
    }
  }
}

@each $set in $font--sizes {
  $size: nth($set, 1);
  #{"%size--" + $size} {
    @include typeset($size);
  }
}

Advanced Sass Theming

$themes: (
  gray: (
    button-bg: #ccc,
    button-color: #f2f2f2
  ),
  brown: (
    button-bg: #ab906b,
    button-color: #ecdac3
  )
);

@function setStyle($theme, $property) {
  @return map-get(map-get($themes, $theme), $property);
}

.btn {
  @each $key, $value in $themes {
    .theme--#{$key} & {
      background: setStyle($key, button-bg);
      color: setStyle($key, button-color);
    }
  }
}

CSS with Superpowers