SCSS veya SASS kullanırken işimizi rahatlatacak ve bir o kadarda kullanımının keyifli olduğu each döngüsünü ve each kullanımını anlatacağım. Each ile oluşturacağımız kod yapısı, item sayısı kadar döngüye sokup, bu dizeler içerisinde bulunan her bir iteme erişmemiz mümkün.
Öncelikle anlatımımıza başlamadan önce karmaşık olmasa da yorucu bir işlemi CSS ile gösterip, ardından SCSS ile anlatacağım.
<div class="icon-facebook"></div> <div class="icon-twitter"></div> <div class="icon-instagram"></div> <div class="icon-youtube"></div> <div class="icon-linkedin"></div>
HTML kalıbımızı oluşturduk. Ardından CSS ile her bir class’a ayrı ayrı kod parçacığı eklemeliyiz.
.icon-facebook{
background-image:url("img/icons/facebook.svg") no-repeat 50%;
}
.icon-twitter{
background-image:url("img/icons/twitter.svg") no-repeat 50%;
}
.icon-instagram{
background-image:url("img/icons/instagram.svg") no-repeat 50%;
}
.icon-twitter{
background-image:url("img/icons/youtube.svg") no-repeat 50%;
}
.icon-linkedin{
background-image:url("img/icons/linkedin.svg") no-repeat 50%;
}Her sosyal medya için tek tek class açıp farklı url adreslerini girdik. Şimdi ise SCSS’i izleyelim.
$social: facebook twitter instagram youtube linkedin;
@each $object in $social {
.icon-#{$object} {
background:url("img/icons/#{$object}.svg") no-repeat 50%;
}
}Yazdığımız bu kısa kodun çıktısı bu şekilde olacaktır.
.icon-facebook{
background-image:url("img/icons/facebook.svg") no-repeat 50%;
}
.icon-twitter{
background-image:url("img/icons/twitter.svg") no-repeat 50%;
}
.icon-instagram{
background-image:url("img/icons/instagram.svg") no-repeat 50%;
}
.icon-twitter{
background-image:url("img/icons/youtube.svg") no-repeat 50%;
}
.icon-linkedin{
background-image:url("img/icons/linkedin.svg") no-repeat 50%;
}
