Yeni bir konu ile karşınızdayım. Bu konuda SASS-SCSS'e değineceğim. SCSS bütün projelerimizde kullandığımızdan dolayı bundan sonraki tanımlamalarımda SCSS diye bahsedeceğim. Konunun devamını okumadan, özet isteyen arkadaşlar için kısa bir cümle ile tanımlayacağım: SCSS sizi AMELELİKTEN kurtarır.
R10.net'i hepimiz seviyoruz. Gün içerisinde defalarca girip, güncel konuları takip ediyorum. Forumun neredeyse %80'i HTML ve CSS'i biliyorlar. Bilmeyenlerde ne işe yaradığını biliyor veya öğrenmeye çalışıyorlar. HTML ve CSS, bir projenin iskeleti ve görünüşüdür. İnsan vücudunu düşündüğümüzde kemikler HTML'dir. Deri ve görünüşteki kısımlar ise CSS'tir. Kısaca özeti budur. Kısa bir süre saf CSS ile çalıştıktan sonra, SCSS'i kullanmaya başlayınca gerçekten kayıp zamana acımıştım. Çok uzun zamandırda SCSS kullanıyorum. Şunu baştan belirteyim: SCSS farklı bir dil değildir. CSS'i yazmayı kolaylaştıran bir derleyicidir.
Nasıl Çalışır ?
Compiler'i duydunuz mu bilmem. Compiler, derleyici demektir. Compiler vasıtası ile yazdığınız kodlar derlenir. Örneğin JS'te Babel vardır. Babel, yazdığınız kodu tüm tarayıcıların anlayacağı hale getirir. Ecmascript 6 veya 7 yazarsınız siz, Babel sizin için tüm tarayıcıların anlayabileceği hale getirir. Bunu yapmamızın sebebi tüm tarayıcıların Ecma serilerinin tamamını desteklememesi. SCSS'te de aynı mantık vardır. Siz SCSS'te kolaylıkla yazarsınız. SCSS Compiler bunu alıp, düz CSS'e çevirir. Sadece kolay yazmayı sağlamaz. Mesela -webkit yazımları vardır CSS'te. Siz SCSS'te text-stroke komutunu yazarsınız. O sizin yerinize -webkit, -moz yazımlarını otomatik olarak ekler. Yani kodunuzu optimize eder. Veya basit bir eklenti daha var. O da CSS'te yazdığınız kodları harf sıralamasına sokar. Sadece bu kadar mı ? Hayır.
SCSS'te variable belirleyebilir, fonksiyonlar yazabilirsiniz. Başka SCSS dosyalarını import etme özelliği sayesinde CSS dosyalarınızı bölebilirsiniz. Bir elementin değerlerini, farklı bir elemente import edebilirsiniz. SCSS sizin yerinize minify edebilir.
İşin özeti siz SCSS yazarsınız, o size CSS olarak verir. Bu da CSS yazma ve okuma hızınızı arttırır.
Örneklerle Anlatalım:
İç içe divlerimiz olsun. Bu divleri normal CSS'te şekillendirmek istersek:
div.foo {
background-color: red;
}
div.foo div.bar {
background-color: blue;
}Bu kısım normal CSS olarak yazdığımız kısım. Peki bunu SCSS'te nasıl yapabiliriz ?div.foo {
background-color: red;
div.bar {
background-color: blue;
}
}Siz bu şekilde iç içe yazım gerçekleştirirsiniz, SCSS sizin için yukarıdaki CSS çıktısını size sağlar. Daha fazla örnekle devam edelim. Bir divin içerisinde span olsun. Bu div ve span'a aynı anda margin vermemiz gerekirse:Normal CSS'te:
div.foo, div.foo span {
margin: 20px;
}Bunu SCSS'te yaparsak:div.foo {
&, span {
margin: 20px;
}
}SCSS'te & işareti, içinde bulunduğunuz elementi seçer. Uzun uzun kod yazmanızı engeller, sizi hızlandırır.
Şu andaki örnekler kısa olduğu için mantıksız geliyor. Biraz daha detaylandıralım:
Bir menü olsun ve sola sağa yaslama yapalım. Sağdaki elementleri de sıralayalım:
<header class="menu">
<div class="left">
<div class="logo">
<img src="image-url"/>
</div>
</div>
<div class="right">
<div class="menu-item">
<span>Anasayfa</span>
</div>
<div class="menu-item">
<span>Ürünler</span>
</div>
<div class="menu-item">
<span>İletişim</span>
</div>
</div>
</header>Normal CSS'te:header.menu {
display: flex;
align-items: center;
justify-content: space-between;
}
header.menu div.left img {
width: 120px;
}
header.menu div.right {
display: flex;
align-items: center;
}
header.menu div.right div.menu-item {
margin-right: 10px;
}
header.menu div.right div.menu-item {
margin-right: 0;
}
header.menu div.right div.menu-item span {
color: red;
}SCSS'te bu kodu yazarsak:header.menu {
justify-content: space-between;
&,
div.right {
display: flex;
align-items: center;
}
div.left img {
width: 120px;
}
div.right div.menu-item {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
span {
color: red;
}
}
}Gördüğünüz gibi kodumuzu kısaltıp, daha hızlı ve okunabilir kodlar yazmamızı sağlıyor. Çok daha fazla örnek verebiliriz bu konuyla ilgili ama konuyu bir yerde kapatmam gerekiyor. Son olarak variable'i de gösterip, tamamlayayım.$color1: red;
div.foo {
background-color: $color1;
}
div.bar {
background-color: $color1;
}Bu şekilde tek bir yerden renklerimizi kontrol edebiliriz. Sitedeki tüm CSS dosyalarına gidip, renkleri düzenlemek yerine tek bir yerden renkleri değiştirebiliriz. Veya font-size belirleyip, bu font-size değerlerini tek bir yerden kontrol edebilirsiniz. Bu konuyla ilgili senaryoları sizde kafanızda kurgulayabilirsiniz. Daha fonksiyonlar, importlar gibi birçok özellik var. Bunlara da dökümanları üzerinden ulaşabilirsiniz. https://sass-lang.com/ adresi üzerinden tüm detaylara erişim sağlayabilirsiniz.Son Sözler
Belirttiğim gibi SCSS faydalıdır ve kullanılması tercih değil, zorunluluktur. Kendinize yapabileceğiniz en iyi şeylerden bir tanesidir. Nasıl kullanılacağı konusuna değinmedim çünkü bununla ilgili çok fazla kaynak var. Bu kaynaklara ve kendi dökümanlarına bakarak SCSS'i öğrenmeye başlayabilirsiniz. 1 gün içinde öğrenip, kullanabilirsiniz. Çok zor değildir. Umarım faydalı ve size bir şeyler katabilen bir konu olmuştur. Bu tip konular açmaya devam ediyorum. Haberdar olmak için etiketlenmek istiyorsanız, yorum olarak belirtebilirsiniz. Farklı bir konuda görüşmek üzere, esen kalın
Daha önceki konular:
https://www.r10.net/webmaster-genel-...-mimarisi.html
https://www.r10.net/webmaster-genel-...-128187-a.html
https://www.r10.net/webmaster-genel-...9965039-a.html
https://www.r10.net/webmaster-genel-...elistirme.html
https://www.r10.net/webmaster-genel-...-128187-a.html
https://www.r10.net/webmaster-genel-...-128680-a.html
Etiketler:
@ethmtrgt;
@Tarkhub;
