The @each directive with Chris Bloom (Sass Bites Podcast #6)

[email protected]

/* CSS Output */
@charset "UTF-8";
div {
  display: inline-block;
  padding: 20px;
  text-align: center;
  width: 200px;
  height: 200px;
}

h2 {
  text-align: center;
}

button {
  border-radius: 5px;
  border: none;
  padding: 10px;
}
button:hover {
  color: white;
  background: black;
}

.block__one {
  background: red;
}

.block__two {
  background: orange;
}

.block__three {
  background: green;
}

.block__four {
  background: maroon;
}

.block__five {
  background: brown;
}

.block__six {
  background: gray;
}

i {
  font-style: normal;
}

.block .block__icon--facebook {
  background-color: white;
  color: black;
  border-radius: 3px;
  padding: 5px;
}
.block .block__icon--facebook:after {
  content: "";
}
.block .block__icon--twitter {
  background-color: white;
  color: black;
  border-radius: 3px;
  padding: 5px;
}
.block .block__icon--twitter:after {
  content: "";
}
.block .block__icon--linkedin {
  background-color: white;
  color: black;
  border-radius: 3px;
  padding: 5px;
}
.block .block__icon--linkedin:after {
  content: "";
}
.block .block__icon--pinterest {
  background-color: white;
  color: black;
  border-radius: 3px;
  padding: 5px;
}
.block .block__icon--pinterest:after {
  content: "";
}
.block .block__icon--github {
  background-color: white;
  color: black;
  border-radius: 3px;
  padding: 5px;
}
.block .block__icon--github:after {
  content: "";
}
.block .block__icon--dribble {
  background-color: white;
  color: black;
  border-radius: 3px;
  padding: 5px;
}
.block .block__icon--dribble:after {
  content: "";
}

.sidebar .photo-roses {
  background-image: url(img/fragrances/roses.png);
}
.sidebar .photo-vanilla {
  background-image: url(img/fragrances/vanilla.png);
}
.sidebar .photo-anise {
  background-image: url(img/fragrances/anise.png);
}
.sidebar .photo-ginger {
  background-image: url(img/fragrances/ginger.png);
}
.sidebar .photo-basil {
  background-image: url(img/fragrances/basil.png);
}

.green-skin .header {
  background: url(img/green-skin/header.png);
}

.green-skin .nav {
  background: url(img/green-skin/nav.png);
}

.green-skin .sidebar {
  background: url(img/green-skin/sidebar.png);
}

.green-skin .footer {
  background: url(img/green-skin/footer.png);
}

.blue-skin .header {
  background: url(img/blue-skin/header.png);
}

.blue-skin .nav {
  background: url(img/blue-skin/nav.png);
}

.blue-skin .sidebar {
  background: url(img/blue-skin/sidebar.png);
}

.blue-skin .footer {
  background: url(img/blue-skin/footer.png);
}

.red-skin .header {
  background: url(img/red-skin/header.png);
}

.red-skin .nav {
  background: url(img/red-skin/nav.png);
}

.red-skin .sidebar {
  background: url(img/red-skin/sidebar.png);
}

.red-skin .footer {
  background: url(img/red-skin/footer.png);
}

.white-skin .header {
  background: url(img/white-skin/header.png);
}

.white-skin .nav {
  background: url(img/white-skin/nav.png);
}

.white-skin .sidebar {
  background: url(img/white-skin/sidebar.png);
}

.white-skin .footer {
  background: url(img/white-skin/footer.png);
}

.social-menu a[href*="facebook"] {
  /* @include sitesprites-sprite(social-facebook); */
}
.social-menu a[href*="twitter"] {
  /* @include sitesprites-sprite(social-twitter); */
}
.social-menu a[href*="myspace"] {
  /* @include sitesprites-sprite(social-myspace); */
}
.social-menu a[href*="youtube"] {
  /* @include sitesprites-sprite(social-youtube); */
}
.social-menu a[href*="vevo"] {
  /* @include sitesprites-sprite(social-vevo); */
}
.social-menu a[href*="pinterest"] {
  /* @include sitesprites-sprite(social-pinterest); */
}

.alpha_color {
  background: red;
}

.bravo_color {
  background: blue;
}

.charlie_color {
  background: green;
}

[email protected]

<!-- HTML Code -->
<div class="block block__one">
  <h2>One</h2>
  <button><i class="block__icon--facebook">Facebook</i></button>
</div>
<div class="block block__two">
  <h2>Two</h2>
  <button><i class="block__icon--twitter">Twitter</i></button>
</div>
<div class="block block__three">
  <h2>Three</h2>
  <button><i class="block__icon--github">Linkedin</i></button>
</div>
<div class="block block__four">
  <h2>Four</h2>
  <button><i class="block__icon--pinterest">Pinterest</i></button>
</div>
<div class="block block__five">
  <h2>Five</h2>
  <button><i class="block__icon--github">Github</i></button>
</div>
<div class="block block__six">
  <h2>Six</h2>
  <button><i class="block__icon--dribble">Dribble</i></button>
</div>

[email protected]

/* Sass Code */

// General Styles

div
  display: inline-block
  padding: 20px
  text-align: center
  width: 200px
  height: 200px

h2
  text-align: center

button
  border-radius: 5px
  border: none
  padding: 10px
  
  &:hover
    color: white
    background: black

.block__one
  background: red

.block__two
  background: orange

.block__three
  background: green
  
.block__four
  background: maroon

.block__five
  background: brown

.block__six
  background: gray
  
i 
  font-style: normal

// Example #1:

$social-icons: facebook, twitter, github

@each $icon in $social-icons
  // do stuff
  // magic #{$icon}
  
// Example #2:

$icons: facebook twitter linkedin pinterest github dribble

=social-icons()
  @each $icon in $icons
    .block__icon--#{$icon}
      background-color: white
      color: black
      border-radius: 3px
      padding: 5px
      &:after
        content: "\e100"
      
.block 
  @include social-icons
  
// Example #2: Chris' fragrance-products

$fragrance-products: roses vanilla anise ginger basil

=all-fragrance-products
  @each $fragrance in $fragrance-products
    .photo-#{$fragrance}
      background-image: url(img/fragrances/#{$fragrance}.png)
      
.sidebar
  @include all-fragrance-products
  
// Example #3: Chris' site-skins

$site-skins: green-skin blue-skin red-skin white-skin
$site-sections: header nav sidebar footer

// looping on skin
@each $skin in $site-skins
  // now looping on sections
  @each $section in $site-sections
    .#{$skin} .#{$section}
      background: url(img/#{$skin}/#{$section}.png)
      
// Example #4: Chris' Compass background images
// This will ONLY work on Sassmeister
// You will need to adjust this for your purposes

// Got a big list of social icons that change from site to site?
// Note: Dale hates this: https://gist.github.com/blackfalcon/4653730
$social-networks: facebook, twitter, myspace, youtube, vevo, pinterest

.social-menu a
  @each $social-network in $social-networks
    // select by href including network name
    &[href*="#{$social-network}"]
      // COMPASS SPRITES GO HERE 
      /* @include sitesprites-sprite(social-#{$social-network}); */
      
// Example #5: Chris' double lists example

// Tracking double lists that you want to line up?
// Dale has a solution: http://blackfalcon.roughdraft.io/4615645
// Using @each, index and nth

$alpha_color: red
$bravo_color: blue 
$charlie_color: green

$color_names: alpha_color bravo_color charlie_color
$color_vars: $alpha_color $bravo_color $charlie_color

@each $name in $color_names
  $i: index($color_names, $name)
  .#{$name}
    background: nth($color_vars, $i)

[email protected]

/* SCSS Code */

// General Styles

div {
  display: inline-block;
  padding: 20px;
  text-align: center;
  width: 200px;
  height: 200px;
}

h2 {
  text-align: center;
}

button {
  border-radius: 5px;
  border: none;
  padding: 10px;
  &:hover {
    color: white;
    background: black;
  }
}

.block__one {
  background: red;
}

.block__two {
  background: orange;
}

.block__three {
  background: green;
}

.block__four {
  background: maroon;
}

.block__five {
  background: brown;
}

.block__six {
  background: gray;
}

i {
  font-style: normal;
}

// Example #1:

$social-icons: facebook, twitter, github;

@each $icon in $social-icons {
  // do stuff
  // magic #{$icon}
}

// Example #2:

$icons: facebook twitter linkedin pinterest github dribble;

@mixin social-icons {
  @each $icon in $icons {
    .block__icon--#{$icon} {
      background-color: white;
      color: black;
      border-radius: 3px;
      padding: 5px;
      &:after {
        content: "";
      }
    }
  }
}

.block {
  @include social-icons;
}

// Example #2: Chris' fragrance-products

$fragrance-products: roses vanilla anise ginger basil;

@mixin all-fragrance-products {
  @each $fragrance in $fragrance-products {
    .photo-#{$fragrance} {
      background-image: url(img/fragrances/#{$fragrance}.png);
    }
  }
}

.sidebar {
  @include all-fragrance-products;
}

// Example #3: Chris' site-skins

$site-skins: green-skin blue-skin red-skin white-skin;
$site-sections: header nav sidebar footer;

// looping on skin
@each $skin in $site-skins {
  // now looping on sections
  @each $section in $site-sections {
    .#{$skin} .#{$section} {
      background: url(img/#{$skin}/#{$section}.png);
    }
  }
}

// Example #4: Chris' Compass background images
// This will ONLY work on Sassmeister
// You will need to adjust this for your purposes

// Got a big list of social icons that change from site to site?
// Note: Dale hates this: https://gist.github.com/blackfalcon/4653730
$social-networks: facebook, twitter, myspace, youtube, vevo, pinterest;

.social-menu a {
  @each $social-network in $social-networks {
    // select by href including network name
    &[href*="#{$social-network}"] {
      // COMPASS SPRITES GO HERE
      /* @include sitesprites-sprite(social-#{$social-network}); */
    }
  }
}

// Example #5: Chris' double lists example

// Tracking double lists that you want to line up?
// Dale has a solution: http://blackfalcon.roughdraft.io/4615645
// Using @each, index and nth

$alpha_color: red;
$bravo_color: blue;
$charlie_color: green;

$color_names: alpha_color bravo_color charlie_color;
$color_vars: $alpha_color $bravo_color $charlie_color;

@each $name in $color_names {
  $i: index($color_names, $name);
  .#{$name} {
    background: nth($color_vars, $i);
  }
}
    

[email protected]

/**
 * @each basically lets us iterate over lists. What's a list?
 * Check it:
 *
 * Lists in SASS appear in two main formats, separated
 * by commas or spaces:
 *
 *  1. The sequence of values found in compound properties
 *  like border or background. For example: "1px solid black"
 *  is actually a list to SASS that can be looped over.
 *
 *  2. Just space or comma separated arbitrary values
 *  For example: $social-icons: facebook, twitter, pinterest;
 */
/**
 * Maybe we need to handle a lot of background images sanely
 */
.sidebar .photo-roses {
  background-image: url(images/fragrances/roses.png);
}
.sidebar .photo-vanilla {
  background-image: url(images/fragrances/vanilla.png);
}
.sidebar .photo-anise {
  background-image: url(images/fragrances/anise.png);
}
.sidebar .photo-ginger {
  background-image: url(images/fragrances/ginger.png);
}
.sidebar .photo-basil {
  background-image: url(images/fragrances/basil.png);
}

/**
 * Maybe we have multiple "skins" for one site
 */
.green-skin .header {
  background: url(images/green-skin/header.png);
}

.green-skin .footer {
  background: url(images/green-skin/footer.png);
}

.green-skin .sidebar {
  background: url(images/green-skin/sidebar.png);
}

.green-skin .main {
  background: url(images/green-skin/main.png);
}

.blue-skin .header {
  background: url(images/blue-skin/header.png);
}

.blue-skin .footer {
  background: url(images/blue-skin/footer.png);
}

.blue-skin .sidebar {
  background: url(images/blue-skin/sidebar.png);
}

.blue-skin .main {
  background: url(images/blue-skin/main.png);
}

/**
 * Got a big list of social icons that change from site to site?
 * Note: Dale hates this: https://gist.github.com/blackfalcon/4653730
 */
.social-menu a[href*="facebook"] {
  /* COMPASS SPRITES GO HERE */
  /* @include sitesprites-sprite(social-facebook);*/
}
.social-menu a[href*="twitter"] {
  /* COMPASS SPRITES GO HERE */
  /* @include sitesprites-sprite(social-twitter);*/
}
.social-menu a[href*="myspace"] {
  /* COMPASS SPRITES GO HERE */
  /* @include sitesprites-sprite(social-myspace);*/
}
.social-menu a[href*="youtube"] {
  /* COMPASS SPRITES GO HERE */
  /* @include sitesprites-sprite(social-youtube);*/
}
.social-menu a[href*="vevo"] {
  /* COMPASS SPRITES GO HERE */
  /* @include sitesprites-sprite(social-vevo);*/
}
.social-menu a[href*="pinterest"] {
  /* COMPASS SPRITES GO HERE */
  /* @include sitesprites-sprite(social-pinterest);*/
}

/**
 * Tracking double lists that you want to line up?
 * Dale has a solution: http://blackfalcon.roughdraft.io/4615645
 */
.alpha_color {
  background: red;
}

.bravo_color {
  background: blue;
}

.charlie_color {
  background: green;
}

[email protected]

// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----

/**
 * @each basically lets us iterate over lists. What's a list?
 * Check it:
 *
 * Lists in SASS appear in two main formats, separated
 * by commas or spaces:
 *
 *  1. The sequence of values found in compound properties
 *  like border or background. For example: "1px solid black"
 *  is actually a list to SASS that can be looped over.
 *
 *  2. Just space or comma separated arbitrary values
 *  For example: $social-icons: facebook, twitter, pinterest;
 */

  
$social-icons: facebook, twitter, pinterest;
@each $icon in $social-icons {
    // do stuff
    // magic: #{$icon}
}


/**
 * Maybe we need to handle a lot of background images sanely
 */

$fragrance-products: roses, vanilla, anise, ginger, basil;
// a mixin to call this loop later
@mixin all-fragrance-products{
    @each $fragrance in $fragrance-products{
        .photo-#{$fragrance} {
            background-image: url(images/fragrances/#{$fragrance}.png);
        }
    }
}
// call the loop mixin
.sidebar {
    @include all-fragrance-products;
}

/**
 * Maybe we have multiple "skins" for one site
 */
$site-skins: green-skin, blue-skin;
$site-sections: header, footer, sidebar, main;

// looping on skin
@each $skin in $site-skins{
    // now looping on sections
    @each $section in $site-sections{
        .#{$skin} .#{$section} {
            background: url(images/#{$skin}/#{$section}.png);
        }
    }
}

/**
 * Got a big list of social icons that change from site to site?
 * Note: Dale hates this: https://gist.github.com/blackfalcon/4653730
 */
$social-networks: facebook, twitter, myspace, youtube, vevo, pinterest;

.social-menu a{
    @each $social-network in $social-networks{

      // select by href including network name
      &[href*="#{$social-network}"] {
          /* COMPASS SPRITES GO HERE */
          /* @include sitesprites-sprite(social-#{$social-network});*/
      }
    }
}

/**
 * Tracking double lists that you want to line up?
 * Dale has a solution: http://blackfalcon.roughdraft.io/4615645
 */

$alpha_color: red; 
$bravo_color: blue; 
$charlie_color: green;

$color_names: alpha_color bravo_color charlie_color;
$color_vars: $alpha_color $bravo_color $charlie_color;

@each $name in $color_names {
    $i: index($color_names, $name);
    .#{$name} {
        background: nth($color_vars, $i);
    }
}

Sass Bites Podcast #6: The @each directive with Chris Bloom
https://www.youtube.com/watch?v=dlmsjTi-HwI
http://blackfalcon.roughdraft.io/4615645-iterate-list-to-produce-placeholder-classes
https://www.youtube.com/user/sassbites

Sass (v3.2.10)
Compass (v0.13.alpha.4)

@each basically lets us iterate over lists. What's a list?
Check it:
Lists in SASS appear in two main formats, separated by commas or spaces:

1. The sequence of values found in compound properties
   like border or background. For example: "1px solid black"
   is actually a list to SASS that can be looped over.
   1. Just space or comma separated arbitrary values
      For example: $social-icons: facebook, twitter, pinterest;