Skip to content

Instantly share code, notes, and snippets.

@edy
Last active August 29, 2015 14:21
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 edy/a88229c5c24f04940384 to your computer and use it in GitHub Desktop.
Save edy/a88229c5c24f04940384 to your computer and use it in GitHub Desktop.
SCSS nth-child(n) iterator
// frontpage widget colors
$frontpage-widget-color1: #00B5CC;
$frontpage-widget-color2: $green;
$frontpage-widget-color3: #CC181E; // youtube-rot
$frontpage-widget-icon1: "\f086"; // comments
$frontpage-widget-icon2: "\f007"; // user
$frontpage-widget-icon3: "\f16a"; // youtube-play
$colors: (
1: $frontpage-widget-color1,
2: $frontpage-widget-color2,
3: $frontpage-widget-color3
);
$icons: (
1: $frontpage-widget-icon1,
2: $frontpage-widget-icon2,
3: $frontpage-widget-icon3
);
@each $color in $colors {
$colornr: nth($color, 1);
$color: nth($color, 2);
@each $icon in $icons {
$iconnr: nth($icon, 1);
$icon: nth($icon, 2);
@if $colornr == $iconnr {
&:nth-child(#{$iconnr}) {
h3 {
color: $color;
&:before {
@include fa-icon();
content: $icon;
width: (18em / 14);
}
}
.more {
background-color: $color;
}
}
}
}
}
@edy
Copy link
Author

edy commented May 21, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment