Skip to content

Instantly share code, notes, and snippets.

@illepic
Created March 3, 2014 08:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save illepic/9320764 to your computer and use it in GitHub Desktop.
Save illepic/9320764 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
// from way deep in Foundation
$body-bg: white;
$body-font-color: grey;
$primary-color: blue;
$secondary-color: green;
$alert-color: red;
$success-color: lime;
$warning-color: yellow;
$info-color: orange;
// Loop through the Foundation (and other) color variables, give us clases
$colors: (
body-bg: $body-bg,
body-font-color: $body-font-color,
primary-color: $primary-color,
secondary-color: $secondary-color,
alert-color: $alert-color,
success-color: $success-color,
warning-color: $warning-color,
info-color: $info-color
);
@each $colorvar, $colorvalue in $colors {
.#{$colorvar} {
background: $colorvalue;
}
}
///
/// What I would LIKE to do, saving code
///
// $colors:
// body-bg,
// body-font-color,
// primary-color,
// secondary-color,
// alert-color,
// success-color,
// warning-color,
// info-color;
// @each $color in $colors {
// .#{$color} {
// background: #{$$color}}; // notice double "$", basically interpolate the variable as a variable
// }
// }
.body-bg {
background: white;
}
.body-font-color {
background: gray;
}
.primary-color {
background: blue;
}
.secondary-color {
background: green;
}
.alert-color {
background: red;
}
.success-color {
background: lime;
}
.warning-color {
background: yellow;
}
.info-color {
background: orange;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment