Sass - Social Media Icons Mixin

social-icons-mixin.scss

// Use with the naming convention for files

$social: "facebook", "twitter", "instagram";

@mixin social-icons {

		&.social {

			background-repeat: no-repeat;
			transition:all 0.2s ease;

			@each $icon in $social {

				&.#{$icon} {

					background-image:url("../img/social-#{$icon}-2.png");
					
				}

			}

			&:hover {

				opacity:0.7;
				transition:all 0.2s ease;

			}

		}

}