Advanced Extends (Sass Bites Podcast #4)

sass-advanced-extends.css

/* CSS Output */

/* General styles */
div {
  display: inline-block;
  width: 200px;
  height: 200px;
}

h2 {
  font-size: 2em;
  color: black;
  text-align: center;
  font-family: helvetica;
}

span {
  padding: 20px;
}

/* BEM Class Naming Convention */
/* Example #1: None DRY way to fix this */
.alpha-color {
  background-color: #ff1500;
  border-color: #ff1500;
}

.bravo-color {
  background-color: #ff2b00;
  border-color: #ff2b00;
}

.charlie-color {
  background-color: #ff4000;
  border-color: #ff4000;
}

.delta-color {
  background-color: #ff5500;
  border-color: #ff5500;
}

.echo-color {
  background-color: #ff6a00;
  border-color: #ff6a00;
}

.foxtrot-color {
  background-color: #ff8000;
  border-color: #ff8000;
}

.golf-color {
  background-color: #ff9500;
  border-color: #ff9500;
}

.hotel-color {
  background-color: #ffaa00;
  border-color: #ffaa00;
}

.indigo-color {
  background-color: #ffbf00;
  border-color: #ffbf00;
}

/* Example #2: Better way of fixing this */
.block__h2--alpha {
  background-color: #ff1500;
  border-color: #ff1500;
}

.block__h2--bravo {
  background-color: #ff2b00;
  border-color: #ff2b00;
}

.block__h2--charlie {
  background-color: #ff4000;
  border-color: #ff4000;
}

.block__h2--delta {
  background-color: #ff5500;
  border-color: #ff5500;
}

.block__h2--echo {
  background-color: #ff6a00;
  border-color: #ff6a00;
}

.block__h2--foxtrot {
  background-color: #ff8000;
  border-color: #ff8000;
}

.block__h2--golf {
  background-color: #ff9500;
  border-color: #ff9500;
}

.block__h2--hotel {
  background-color: #ffaa00;
  border-color: #ffaa00;
}

.block__h2--indigo {
  background-color: #ffbf00;
  border-color: #ffbf00;
}

/* Example #3: Dan uses IcoMoon is this example */
.form__button--twitter:before, .form__button--github:before, .form__button--facebook:before {
  font-family: "ico-fonts";
  speak: none;
  font-style: normal;
  line-height: 1;
}

.form__button--twitter:before {
  content: "";
}

.form__button--github:before {
  content: "";
}

.form__button--facebook:before {
  content: "";
}

sass-advanced-extends.html

<!-- HTML Code -->

<div class="block"><h2 class="block__h2"><span class="block__h2--alpha">Alpha</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--bravo">Bravo</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--charlie">Charlie</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--delta">Delta</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--echo">Echo</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--foxtrot">Foxtrot</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--golf">Golf</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--hotel">Hotel</span></h2></div>
<div class="block"><h2 class="block__h2"><span class="block__h2--indigo">Indigo</span></h2></div>
<div class="form"><button class="form__button"><span class="form__button--twitter">Twitter</span></button></div>
<div class="form"><button class="form__button"><span class="form__button--github">Github</span></button></div>
<div class="form"><button class="form__button"><span class="form__button--facebook">Facebook</span></button></div>

sass-advanced-extends.sass

/* Sass Code */

/* General styles */
div
  display: inline-block
  width: 200px
  height: 200px

h2
  font-size: 2em
  color: black
  text-align: center
  font-family: helvetica

span
  padding: 20px

/* BEM Class Naming Convention */

// Don't do this
// Too much is being repeated
// .alpha-color {
//   background-color: #ff1500;
// }

// .bravo-color {
//   background-color: #fb2b00;
// }

// .charlie-color {
//   background-color: #ff4000;
// }

// .delta-color {
//   background-color: #ff5500;
// }

/* Example #1: None DRY way to fix this */

$names: alpha bravo charlie delta echo foxtrot golf hotel indigo

=color-loop($color, $iterations, $hue, $names: $names)
  @for $i from 1 through $iterations
    $i: $i
    .#{nth($names, $i)}-color
      $adjust: $i * $hue
      $use-color: adjust_hue($color, $adjust)
      background-color: $use-color
      border-color: $use-color

+color-loop(red, 9, 5)

/* Example #2: Better way of fixing this */

$names: alpha bravo charlie delta echo foxtrot golf hotel indigo

=color-loop($color, $iterations, $hue, $names: $names)
  @for $i from 1 through $iterations
    $i: $i
    %#{nth($names, $i)}-color
      $adjust: $i * $hue
      $use-color: adjust_hue($color, $adjust)
      background-color: $use-color
      border-color: $use-color

+color-loop(red, 9, 5)

.block__h2--alpha
  @extend %alpha-color

.block__h2--bravo
  @extend %bravo-color

.block__h2--charlie
  @extend %charlie-color

.block__h2--delta
  @extend %delta-color

.block__h2--echo
  @extend %echo-color

.block__h2--foxtrot
  @extend %foxtrot-color

.block__h2--golf
  @extend %golf-color

.block__h2--hotel
  @extend %hotel-color

.block__h2--indigo
  @extend %indigo-color

/* Example #3: Dan uses IcoMoon is this example */

$icons: (twitter "") (github "") (facebook "")

%ico-font-base
  font-family: "ico-fonts"
  speak: none
  font-style: normal
  line-height: 1

@each $icon in $icons
  %icon-#{nth($icon, 1)}:before
    content: nth($icon, 2)
    @extend %ico-font-base

.form__button--twitter
  @extend %icon-twitter

.form__button--github
  @extend %icon-github

.form__button--facebook
  @extend %icon-facebook

sass-advanced-extends.scss

/* SCSS Code */

/* General styles */
div {
  display: inline-block;
  width: 200px;
  height: 200px;
}

h2 {
  font-size: 2em;
  color: black;
  text-align: center;
  font-family: helvetica;
}

span {
  padding: 20px;
}

/* BEM Class Naming Convention */

// Don't do this
// Too much is being repeated
// .alpha-color {
//   background-color: #ff1500;
// }

// .bravo-color {
//   background-color: #fb2b00;
// }

// .charlie-color {
//   background-color: #ff4000;
// }

// .delta-color {
//   background-color: #ff5500;
// }

/* Example #1: None DRY way to fix this */

$names: alpha bravo charlie delta echo foxtrot golf hotel indigo;

@mixin color-loop($color, $iterations, $hue, $names: $names) {
  @for $i from 1 through $iterations {
    $i: $i;
    .#{nth($names, $i)}-color {
      $adjust: $i * $hue;
      $use-color: adjust_hue($color, $adjust);
      background-color: $use-color;
      border-color: $use-color;
    }
  }
}

@include color-loop(red, 9, 5);

/* Example #2: Better way of fixing this */

$names: alpha bravo charlie delta echo foxtrot golf hotel indigo;

@mixin color-loop($color, $iterations, $hue, $names: $names) {
  @for $i from 1 through $iterations {
    $i: $i;
    %#{nth($names, $i)}-color {
      $adjust: $i * $hue;
      $use-color: adjust_hue($color, $adjust);
      background-color: $use-color;
      border-color: $use-color;
    }
  }
}

@include color-loop(red, 9, 5);

.block__h2--alpha {
  @extend %alpha-color;
}

.block__h2--bravo {
  @extend %bravo-color;
}

.block__h2--charlie {
  @extend %charlie-color;
}

.block__h2--delta {
  @extend %delta-color;
}

.block__h2--echo {
  @extend %echo-color;
}

.block__h2--foxtrot {
  @extend %foxtrot-color;
}

.block__h2--golf {
  @extend %golf-color;
}

.block__h2--hotel {
  @extend %hotel-color;
}

.block__h2--indigo {
  @extend %indigo-color;
}

/* Example #3: Dan uses IcoMoon is this example */

$icons: (twitter "") (github "") (facebook "");

%ico-font-base {
  font-family: "ico-fonts";
  speak: none;
  font-style: normal;
  line-height: 1;
}

@each $icon in $icons {
  %icon-#{nth($icon, 1)}:before {
    content: nth($icon, 2);
    @extend %ico-font-base;
  }
}

.form__button--twitter {
  @extend %icon-twitter;
}

.form__button--github {
  @extend %icon-github;
}

.form__button--facebook {
  @extend %icon-facebook;
}

Advanced Extends (with Dan Sande)
Courtesy of Sass Bites Podcast #4
https://www.youtube.com/watch?v=vvAKLBqNroU
https://www.youtube.com/user/sassbites