Skip to content

Instantly share code, notes, and snippets.

@illepic
Created September 5, 2013 06:04
Show Gist options
  • Save illepic/6446554 to your computer and use it in GitHub Desktop.
Save illepic/6446554 to your computer and use it in GitHub Desktop.
A quick sassbites run through of @each
// ----
// 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);
}
}
/**
* @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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment