SASS loops

// Colors
$white: #fff;
$black: #000;
$green_1: #50901A;
$green_2: #68BB22;
$green_3: #81DA36;
$emerald_1: #2BAE60;
$emerald_2: #3DCF78;
$emerald_3: #66D994;
$violet_1: #6B45C4;
$violet_2: #8A6CD0;
$violet_3: #A993DC;
$orange_1: #E09413;
$orange_2: #EEAB38;
$orange_3: #F2BF67;
$aqua_1: #35A8A4;
$aqua_2: #4AC6C2;
$aqua_3: #71D2CF;
$rose_1: #CE3D82;
$rose_2: #D8669C;
$rose_3: #E28FB6;
$carrot_1: #D74E17;
$carrot_2: #EA6A37;
$carrot_3: #EF8C65;
$sand_1: #CCC3A0;
$sand_2: #DED8C1;
$sand_3: #F0EDE2;
$tan_1: #908763;
$tan_2: #A79F7F;
$tan_3: #BCB69D;
$umber_1: #39372A;
$umber_2: #565340;
$umber_3: #736F56;
$grey_1: #3C3C3C;
$grey_2: #555555;
$grey_3: #6F6F6F;
$platinum_1: #CFCFCF;
$platinum_2: #E8E8E8;
$platinum_3: #F5F5F5;
$colors: (green, $green_1, $green_2, $green_3 ),
(emerald, $emerald_1, $emerald_2, $emerald_3),
(violet, $violet_1, $violet_2, $violet_3),
(orange, $orange_1, $orange_2, $orange_3),
(aqua, $aqua_1, $aqua_2, $aqua_3),
(rose, $rose_1, $rose_2, $rose_3),
(carrot, $carrot_1, $carrot_2, $carrot_3),
(sand, $sand_1, $sand_2, $sand_3 ),
(tan, $tan_1, $tan_2, $tan_3),
(umber, $umber_1, $umber_2, $umber_3),
(grey, $grey_1, $grey_2, $grey_3),
(platinum, $platinum_1, $platinum_2, $platinum_3);
$socials: (pinterest, $carrot_2, $carrot_1),
(facebook, $violet_2, $violet_1),
(twitter, $aqua_2, $aqua_1),
(youtube, $rose_2, $rose_1),
(subscribe, $orange_2, $orange_1);
view raw _base.scss hosted with ❤ by GitHub
.nav-primary {
.menu-item {
@each $color, $darker, $normal, $lighter in $colors {
&.#{$color} {
a {
color: $normal;
}
svg {
fill: $normal;
}
.sub-menu {
background: $normal;
.current-menu-item > a,
.menu-item:hover > a {
background: $lighter;
}
}
&:hover,
&.current-menu-item {
a {
color: $white;
background: $normal;
}
svg {
fill: $white;
}
}
}
}
}
}
view raw _nav-menu.scss hosted with ❤ by GitHub
/* Post Elements
---------------------------------------------------------------------------------------------------- */
/* Socials Shortcode
--------------------------------------------- */
p.socials {
a {
background: $grey_2;
border-radius: 50%;
display: inline-block;
@include margin-no-edge( 0 2px );
width: 40px;
height: 40px;
text-align: center;
svg {
fill: $white;
@include icon-position( 24px, 40px );
}
&:hover {
text-decoration: none;
}
@each $social, $color, $colorHover in $socials {
&.#{$social} {
background: $color;
&:hover {
background: $colorHover;
}
}
}
}
}
view raw _post-elements.scss hosted with ❤ by GitHub

css sass