Ö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ı.

SASS nedir?

SASS yani söz dizimsel stil sayfaları, CSS yazmayı çok daha güçlü hale getiren değişkenler içerir. Matematiksel işlemler, karışımlar, döngüler, işlevler, içe aktarmalar ve diğer ilginç işlevleri kullanmanızı sağlayan bir CSS ön işlemcisidir. 

Bazı açılardan, SASS’yi bir stil sayfası genişletme dili olarak düşünebilirsiniz. Çünkü temel bir programlama dilinin faydalarını sunarak standart css özellikleri genişletilebilir. Böylece SASS, kodunuzu derleyecek ve bir tarayıcının anlayabileceği CSS çıktısını oluşturacaktır.

SCSS ile CSS Uyumlu Söz Dizimi Mümkün mü?

CSS’i biliyorsanız, SASS’ı da zorlanmadan öğrenir veya bilirsiniz. SASS, iki farklı sözdizimiyle gelir: SASS’ın kendisi ve en çok kullanılan SCSS’tir. SCSS sözdizimi CSS uyumludur. Bu sebeple .css dosyanızı .scss olarak yeniden adlandırmanız yeterlidir. İlk SCSS dosyalarını tıpkı bu biçimde oluşturabilirsiniz.
 
Tabi ki bunu yaparak SASS’ın sağladığı süper güç ve yeteneklerin hiçbirini kullanmış olmuyorsunuz.  Ancak en azından SASS‘ı kullanmaya başlamak için saatler harcamanıza gerek olmadığını anlamış oluyorsunuz. Bu başlangıç ​​noktasından itibaren, ilerleme kaydettikçe SASS sözdizimi öğrenimi daha da etkin ve kolaylıkla sağlanabilir.

SASS İstediğiniz Değişkeni Kullanma Olanağı Sunar

SASS gibi bir CSS ön işlemcisi kullanmanın en büyük faydasından birisi değişkenleri kullanma yeteneğidir. Bir değişken, bir dizi değeri depolamanıza ve bu değişkenleri SASS dosyalarınızda istediğiniz kadar kullanma olanağı tanır.

Aynı zamanda istediğiniz yerde yeniden kullanmanıza da olanak sunar. Her yerde harika bir mavi renge sahip bir site inşa ettiğiniz bir senaryo hayal edebilirsiniz.
Düğmeler, menüler, simgeler, kapsayıcılar vb.
Ayrıca birkaç harika yazı tipi kullanıyorsunuz: Ubuntu ve Nunito. 
 
Geleneksel CSS’yi kullanarak, aynı kodu defalarca tekrarlamanız gerekir, ancak SASS ile bu değerleri değişkenler olarak saklayabilirsiniz: 

$blue: hsl(215deg 100% 35%);
$montserrat-font: 'Montserrat', 'Arial', 'Roboto', sans-serif;
$fredoka-font: 'Fredoka', 'Arial', 'Roboto', sans-serif;

Değişkenlerini oluşturduktan sonra, bunları ihtiyacınız olan her yerde şu şekilde kullanabilirsiniz:

h1 {
  font: $montserrat-font;
  color: $blue;
}
a {
  font: $fredoka-font;
  background-color: $blue;
  padding: 16px;
}

SCSS dosyalarınızı derlediğinizde, SASS kullandığınız değişkenlerle ilgilenir. Değişken adını saklanan değeriyle değiştirir. Tabii ki, rengin değerini değiştirmek, değişken içeriğini güncelleme ve yeniden derlemek kadar hızlı gerçekleşir. CSS dosyasında renk güncellemek için kullanılmakta olan bul – değiştir özelliği de bu sayede geride kalmış olur.

SCSS Kullanmanın Avantajları

SCSS daha açıklayıcı bir özelliğe sahiptir
Kuralların düzgün kod yerleşimini teşvik eder
Kullanıcılara daha iyi satır içi dokümantasyon oluşturma olanağı sunar
Mevcut CSS araçlarının ve CSS kod tabanlarının entegrasyonu da kolaylıkla yapılır.

Yazan : Barış Doğan Sütçü

2024 yapay zeka siteleri :is() backend developer css css grid CSS HTML css kodları css masonry css nedir CSS püf noktalar css yeni özellikler CSS Öğren EACH En iyi kod editörleri En iyi yazılımcı ide programları frontend developer html HTML siteye favicon ekleme Intellij IDEA javascript javascript nedir list makine öğrenimi map midjourney otomasyon Problem Çözme Becerileri PyCharm robotik SASS SCSS scss ile each kullanımı seo seo nasıl yapılır seo nedir Sublime Text Temel CSS visual studio code vs code Xcode yapay zeka yapay zeka siteleri Yazılım Mühendisliği ücretli yapay zeka siteleri ücretsiz yapay zeka

SASS Kullanmanın CSS’e Göre Faydaları Nelerdir? yazısı ilk önce BARIŞ DOĞAN SÜTÇÜ üzerinde ortaya çıktı.