Responsive with SASS Mixin use breakpoint on if condition

Responsive with SASS Mixin use breakpoint on if the condition SCSS Code _mixins.scss code @mixin response($breakpoint) { @if($breakpoint == xl){ @media(max-width: 1200px){ @content; } } @if($breakpoint == lg){ @media(max-width: 1000px){ @content; } } @if($breakpoint == md){ @media(max-width: 768px){ @content; } } } Use mixin in other SCSS files .first-nav{ grid-column: 7 / 10; grid-row: 1 […]

@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 […]