map arşivleri - BARIŞ DOĞAN SÜTÇÜ https://barisdogansutcu.com/tag/map/ FRONTEND DEVELOPER Fri, 23 Sep 2022 13:38:32 +0000 tr hourly 1 https://wordpress.org/?v=6.7.5 https://barisdogansutcu.com/wp-content/uploads/2019/07/barisdogansutcuLogo.png map arşivleri - BARIŞ DOĞAN SÜTÇÜ https://barisdogansutcu.com/tag/map/ 32 32 SCSS ve SASS’ta Each Döngüsü Oluşturma https://barisdogansutcu.com/scss-ve-sassta-each-dongusu-olusturma/ https://barisdogansutcu.com/scss-ve-sassta-each-dongusu-olusturma/#respond Sun, 14 Aug 2022 22:55:39 +0000 https://barisdogansutcu.com/?p=9167 SCSS veya SASS kullanırken işimizi rahatlatacak ve bir o kadarda kullanımının keyifli olduğu each döngüsü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.

SCSS ve SASS’ta Each Döngüsü Oluşturma yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

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

SCSS ve SASS’ta Each Döngüsü Oluşturma yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.

]]> https://barisdogansutcu.com/scss-ve-sassta-each-dongusu-olusturma/feed/ 0