SCSS Code
$socialMediaColors : 1 #3b5998, 2 #b31217, 3 #dc4e41, 4 #55acee, 5 #517fa4, 6 #0077b5; @each $color in $socialMediaColors { .social-icons-item:nth-child(#{nth($color, 1)}) .social-icons-link{ color: nth($color, 2); border: .1rem solid nth($color, 2); } }
HTML Code
<ul class="social-icons"> <li class="social-icons-item"> <a href="#" class="social-icons-link"> <i class="fab fa-facebook"></i> </a> </li> <li class="social-icons-item"> <a href="#" class="social-icons-link"> <i class="fab fa-youtube"></i> </a> </li> <li class="social-icons-item"> <a href="#" class="social-icons-link"> <i class="fab fa-linkedin-in"></i> </a> </li> <li class="social-icons-item"> <a href="#" class="social-icons-link"> <i class="fab fa-instagram"></i> </a> </li> </ul>
CSS Output
.social-icons-item:nth-child(1) .social-icons-link { color: #3b5998; border: 0.1rem solid #3b5998; } .social-icons-item:nth-child(2) .social-icons-link { color: #b31217; border: 0.1rem solid #b31217; } .social-icons-item:nth-child(3) .social-icons-link { color: #dc4e41; border: 0.1rem solid #dc4e41; } .social-icons-item:nth-child(4) .social-icons-link { color: #55acee; border: 0.1rem solid #55acee; } .social-icons-item:nth-child(5) .social-icons-link { color: #517fa4; border: 0.1rem solid #517fa4; } .social-icons-item:nth-child(6) .social-icons-link { color: #0077b5; border: 0.1rem solid #0077b5; }