Skip to content

Instantly share code, notes, and snippets.

@dfadler
Created February 15, 2014 20:09
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 dfadler/9024590 to your computer and use it in GitHub Desktop.
Save dfadler/9024590 to your computer and use it in GitHub Desktop.
Sass example key pair values and loops
$meet-the-families: #82cdc8
$learn-about-farming: #d4a00f
$recognition-programs: #e27669
$farm-blog: #8b8d08
$generic: #bb6c03
$section-colors: farm-moms $meet-the-families, meet-the-family $meet-the-families, learn-about-farming $learn-about-farming, quiz $learn-about-farming, recognition-program $recognition-programs, post $farm-blog, generic $generic
.farm-moms-theme .wysiwyg h1,
.farm-moms-theme .wysiwyg h2,
.farm-moms-theme .wysiwyg h3,
.farm-moms-theme .wysiwyg h4,
.farm-moms-theme .wysiwyg h5,
.farm-moms-theme .wysiwyg h6 {
color: #82cdc8
}
.meet-the-family-theme .wysiwyg h1,
.meet-the-family-theme .wysiwyg h2,
.meet-the-family-theme .wysiwyg h3,
.meet-the-family-theme .wysiwyg h4,
.meet-the-family-theme .wysiwyg h5,
.meet-the-family-theme .wysiwyg h6 {
color: #82cdc8
}
.learn-about-farming-theme .wysiwyg h1,
.learn-about-farming-theme .wysiwyg h2,
.learn-about-farming-theme .wysiwyg h3,
.learn-about-farming-theme .wysiwyg h4,
.learn-about-farming-theme .wysiwyg h5,
.learn-about-farming-theme .wysiwyg h6 {
color: #d4a00f
}
.quiz-theme .wysiwyg h1,
.quiz-theme .wysiwyg h2,
.quiz-theme .wysiwyg h3,
.quiz-theme .wysiwyg h4,
.quiz-theme .wysiwyg h5,
.quiz-theme .wysiwyg h6 {
color: #d4a00f
}
.recognition-program-theme .wysiwyg h1,
.recognition-program-theme .wysiwyg h2,
.recognition-program-theme .wysiwyg h3,
.recognition-program-theme .wysiwyg h4,
.recognition-program-theme .wysiwyg h5,
.recognition-program-theme .wysiwyg h6 {
color: #e27669
}
.post-theme .wysiwyg h1,
.post-theme .wysiwyg h2,
.post-theme .wysiwyg h3,
.post-theme .wysiwyg h4,
.post-theme .wysiwyg h5,
.post-theme .wysiwyg h6 {
color: #8b8d08
}
.generic-theme .wysiwyg h1,
.generic-theme .wysiwyg h2,
.generic-theme .wysiwyg h3,
.generic-theme .wysiwyg h4,
.generic-theme .wysiwyg h5,
.generic-theme .wysiwyg h6 {
color: #bb6c03
}
@import 'colors'
.wysiwyg
h1, h2, h3, h4, h5, h6
@each $section-color in $section-colors
.#{nth($section-color, 1)}-theme &
color: #{nth($section-color, 2)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment