CSS'te "$" ve "&" işaretlerinin anlamı

Buradaki kodlarda bu işaretleri gördüm. Bunlar ne anlama geliyor?

CSS yerine SCSS library’sini kullanmış.

$t: 2.5s;

2.5 saniye belirtiyor ben t yazdığımda 2.5 saniye geldin. Değer atıyor kısaca.

.div .img{}

Burada CSS’de div altındaki image bakıyoruz gibi düşün. SCSS onun yerine

.some-class {
  &.another-class {}
}

iç içe kullanarak rahat kullanım sağlıyor.

1 Beğeni

Tasarımcının koduna bakıyorum da, gerçekten helal olsun. Saatlerdir inceliyorum, aynısını bakmadan yapacağım diye kafayı taktım, lâkin çok zor. Nereden aklında gelmiş şaşırıyorum gerçekten.
Örneğin şu bölümü cidden anlayamadım:

@for $i from 1 through $slides{
			&:nth-child(#{$i}){ 
				animation-delay: $t * ($i - 1) * 2;
				.untitled__slideBg{
					background-image: nth($images, $i);
				}

Kodu parçalıyorum, bazı kısımları yorum satırına alıyorum, değerleri değiştiriyorum ama yine yok. Anlayamadım.

Bu kısım arka tarafta dönen animasyonu ayarlıyor. Kısaca resimleri görememeniz çok normal :smiley:
arka tarafta bulunan resimler hem değişiyor hem etraflarında dönüyor. Bu değişimlerde animasyon ile gerçekleşiyor :smiley:

999 yapınca bazılarını bozuluyor :sweat_smile:

1 Beğeni

Az önce aynısının içeriğini düzenleyerek yaptığım sayfanın ana sayfasına koymayı planladım. Ancak tam ekran için tasarlanmış. slider divin altına bir eleman yerleştirince gözükmüyor. overflow özelliğini body’ ye değilde bir divin içine koymayı düşündüm. Ancak bu seferde her şey mahvoldu. hidden özelliği falan kalmadı. İşin içinden çıkamadım.

1 Beğeni

SCSS anlama kabiliyetim yok benim o yüzden kullanmıyorum :sweat_smile:

1 Beğeni