SCSS Döngüler – Each, For, While Kullanımı

SCSS’de döngüler yani each, for ve while kullanımı ile devam ediyoruz. SCSS’deki each, for ve while döngülerini tıpkı programlama dillerinde olduğu gibi kullanıyoruz.

Sadece birkaç küçük değişiklik yapıyoruz. Örneğin önlerine “@” işaretini yazmak gibi..

Each, for ve while ile kodlarımızı yazarken hepsinde aynı Css çıktısını almaya çalışalım. Böylece aynı Css çıktısının each, for ve while ile nasıl yazıldığını karşılaştırabilirsiniz.

Css çıktılarımız aşağıdaki gibi olacak.

Gördüğünüz gibi 5’den 25’e kadar margin değerlerini belli class isimlerine atadım. Sizde kendinize bu tarz kodlar hazırlayarak kod yazım hızınızı arttırabilirsiniz.

Örneğin bir div etiketi oluşturup class’ına m20 yazarsanız div’e margin değeri olarak 20px vermiş olursunuz.

Şimdi asıl konumuza dönelim ve sırasıyla kullanımlarına bakalım.

Eğer bildiğiniz bir programlama dili varsa each, for ve while kullanımlarında hiç zorlanmayacaksınızdır.

SCSS each Kullanımı

Scss Kodları

Css Çıktısı

SCSS for Kullanımı

Scss Kodları

Burada dikkat etmeniz gereken bir yer bulunuyor. Zaten kodların içerisinde de yorum satırı olarak ekledim.

Eğer döngüyü through anahtar kelimesiyle yazarsanız 5 değeri döngüye dahil olacaktır.

Eğer döngüyü to anahtar kelimesiyle yazarsanız 6 değeri döngüye dahil olmayacaktır.

Yukarıdaki 2 farklı kullanımda aynı Css çıktısını verecektir.

Css Çıktısı

SCSS while Kullanımı

Scss Kodları

Css Çıktısı

SCSS’de each, for ve while kullanımı bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link