@each Loop with Index SASS Code

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; }