each.scss

// ----
// 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);
    }
}

SassMeister-output.css

/**
 * @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;
}