CSS ve SASS
Merhaba. Bu yazımızda sizlere CSS ve SASS dan bahsedeceğiz. CSS nedir? SASS nedir? CSS ve SASS arasındaki fark nelerdir? Bu yazımızda detaylıca göreceğiz.
CSS (Cascading Style Sheets), HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir. Yada basit bir tabir ile sitelerimizi görselleştirmek, renklendirmek ve stillendirmek için kullandığımıız bir araçtır. SASS (Syntactically Awesome Stylesheets) ise CSS formatına derlenebilen dinamik bir biçim şablon dilidir. İlk olarak Hampton Catlin tarafından tasarlanmış ve Natalie Weizenbaum tarafından programlanmıştır.
CSS, 1996’daki tanıtımından bu yana çok yol kat etti. Dilin tarihinin başlarında geliştiriciler, dille çalışmayı kolaylaştıran Sass gibi ön işlemcileri kullanmak zorundaydı. Bu özelliklerden bazıları değişkenleri, işlevleri, döngüleri ve koşulları içeriyordu.
Bugün CSS, 1996’da gördüğümüzden çok farklı. Değişkenler, medya sorguları ve iç içe stillendirme gibi özelliklerin sunulmasıyla birlikte, geliştiricilerin geçmişte olduğu gibi artık Sass’a ve diğer ön işlemcilere güvenmeleri gerekmiyor.
Sass, 2006’dan beri var olan bir CSS öncüsüdür. Dünya çapında birçok geliştirici bunu kullanıyor ve her boyuttaki web sitelerine güç veriyor. Karışımlar, işlevler ve döngüler gibi özellikler ekleyerek normal (veya yerel) CSS’nin üzerine kuruludur. Şimdi sözdizimine ve bugünkü yerel CSS ile nasıl karşılaştırıldığına bir göz atalım.
İç İçe Stiller (Nested Styles)
İç içe yazma, Sass gibi önişlemcilerin temelini oluşturan bir özelliktir. Bazı geliştiriciler yalnızca iç içe stil desteği nedeniyle Sass’a geçti. İç içe yerleştirme yalnızca stillendirmeyi kolaylaştırmakla kalmaz, aynı zamanda yazmanın daha “doğal” olmasını da sağlar. Örneklemek gerekirse, aşağıdaki HTML’ye sahip olduğunuzu varsayalım:
<div>
<h3>Teknokodi Eğitim İçerikleri</h3>
<ul>
<li>Mobil</li>
<li>Web</li>
<li>Masaüstü</li>
<li>GIT</li>
</ul>
</div>
<ul> öğesi içindeki <li> öğelerine stil vermek istiyorsanız, Sass’ın iç içe yerleştirme desteği olduğundan aşağıdakileri yapabilirsiniz:
ul
background-color: blue
li
list-style: inside
Native CSS daha önce bunu yapamıyordu ve bunun yerine aşağıdakileri yapmanız gerekiyordu:
ul {
background-color: blue;
}
ul li {
list-style: inside;
}
İç içe yerleştirme artık Native CSS tarafından desteklendiğinden, kodun şu şekilde yazabiliriz:
ul {
background-color: blue;
li {
list-style: inside;
}
}
Bu işe yarar, peki ya iç içe geçmiş bir sözde sınıfa stil vermek istediğiniz durumlar? Aşağıdaki kod çalışmaz.
div {
background-color: red;
:hover {
text-decoration: underline;
}
}
Tarayıcı, iç içe geçmiş seçici ile onun üst öğesi arasına otomatik olarak boşluk eklediğinden, ayrıştırılan seçici şu şekilde görünecektir: div :hover. Bu davranışı önlemek için iç içe geçmiş seçicinin önüne & simgesi eklemeliyiz.
div {
background-color: red;
&:hover {
text-decoration: underline;
}
}
& sembolüne ‘nesting selector’ (yuva seçici) denir ve bir alt öğe ile onun atası arasındaki doğrudan ilişkiyi tanımlar.
Sass'taki Fonksiyonlar ve Mixin
Fonksiyonlar, Sass’ın ana satış noktalarından biridir. Birçok Sass işlevi, kullanılmadan önce yüklenmesi gereken yerleşik modüllerde mevcuttur. Bir fonksiyonun yüklenmesi @use kuralı kullanılarak yapılabilir.
Bu modüllerden bazıları sayıların işlenmesini sağlayan sass:math modülünü, dizelerle çalışmak için sass:string modülünü ve renklerle çalışmak için kullanılabilen sass:color modülünü içerir. Ancak tüm işlevler modüllerde bulunmaz. If gibi bazı işlevler global olarak kullanılır.
Örneğin, sass:string modülünü kullanarak dizeleri nasıl değiştirebileceğiniz aşağıda açıklanmıştır.
@use "sass:string"
div:after
display: block
content: string.quote(Teknokodi)
Yukarıdaki kod bloğunda @use direktifi ile sass:string modülünü yüklüyoruz, ardından modülü yükledikten sonra; bir div:after sözde elemanına stil uygularız. Content özelliğine, yüklenen modüldeki string.quote(Teknokodi) ifadesinin sonucu atanır. Aşağıdaki gibi bir sonuuç çıkar.
div:after {
display: block;
content: "Teknokodi";
}
Daha karmaşık bir örneği keşfetmeden önce, Sass’ta özel bir fonksiyonun nasıl tanımlanacağına bakalım. Özel işlevleri @function yazıp bir işlev adı belirterek tanımlarsınız.
@return kuralını kullanarak bir işlevden değer döndürebilirsiniz. Bir karenin alanını kenar uzunluğuna göre hesaplayan özel bir fonksiyon tanımlayalım. Kenar uzunluğu, fonksiyona parametre olarak aktarılan değerdir.
@function calculate-square-area($side-length)
@return $side-length * $side-length
div
width: calculate-square-area(40)
height: calculate-square-area(40)
Aşağıdaki kod aşağıdakilerle sonuçlanır:
div {
width: 1600;
height: 1600;
}
Şimdi Sass’ta işlevler ve karışımlarla daha karmaşık bir şeyi nasıl oluşturabileceğinize bakalım. Mixin (Karışımlar) @mixin direktifiyle tanımlanır. Tıpkı işlevler gibi parametre alabilirler ancak işlevlerden farklı olarak bir değer döndürmezler.
Bunun yerine, ilgili stil kurallarını gruplandırmak istediğinizde mixin kullanışlı olur. Aşağıdaki koda bir göz atın ve neler olduğunu tahmin edip edemeyeceğinizi görün:
@use "sass:string"
// Function to generate button class based on the button type
@function generate-button-class($type)
@return string.quote("button-" + $type)
// Define button styles
@mixin button-style($type)
.#{generate-button-class($type)}
padding: 10px
border: 1px solid #333
background-color: if($type == "primary", #3498db, #e74c3c)
color: #fff
text-decoration: none
display: block
cursor: pointer
&:hover
background-color: darken(if($type == "primary", #3498db, #e74c3c), 10%)
// Apply button styles for different button types
@include button-style("primary")
@include button-style("secondary")
Yukarıdaki kodda pek çok şey oluyor, o yüzden hadi onu parçalara ayıralım. İlk olarak, created-button-class işlevi $type argümanını alır ve onu “button-” dizisine bağlar.
Daha sonra, bir karıştırma düğmesi stili $type parametresini alır ve created-button-class işlevinin sonucunu bir dizeye eklemek için .#{generate-button-class($type)} enterpolasyonunu kullanır.
Enterpolasyon sözdizimi (#{<ifade>}), bir dize içinde sınıf adlarını veya özellik değerlerini dinamik olarak oluşturmak istediğinizde özellikle kullanışlıdır.
if() global işlevi, $type parametresinin “birincil” olup olmadığını kontrol eder ve koşul doğruysa arka plan rengini #3498db, aksi takdirde #e74c3c olarak ayarlar.
Son olarak mixte tanımlanan stilleri uygulamak için @include yönergesi kullanılır. Yukarıdaki kod bloğu aşağıdakilerle sonuçlanmalıdır:
.button-primary {
padding: 10px;
border: 1px solid #333;
background-color: #3498db;
color: #fff;
text-decoration: none;
display: block;
cursor: pointer;
}
.button-primary:hover {
background-color: #217dbb;
}
.button-secondary {
padding: 10px;
border: 1px solid #333;
background-color: #e74c3c;
color: #fff;
text-decoration: none;
display: block;
cursor: pointer;
}
.button-secondary:hover {
background-color: #d62c1a;
}
Native CSS'deki İşlevler ve Kurallar
CSS, stil öğeleri için ek işlevsellik sağlayan bir dizi yerleşik işleve sahiptir. Bu işlevler güçlü olsa da, Sass gibi ön işlemcilerin sunduğu kapsamlı yeteneklerle karşılaştırıldığında biraz sınırlıdır.
Dikkate değer CSS işlevleri arasında degrade arka planlar oluşturmak için doğrusal degrade, özellik değerleri dahilinde hesaplamalar yapmak için calc ve minimum ve maksimum değerleri işlemek için min ve max gibi işlevler bulunur. Sass’ın aksine CSS’de özel bir işlev tanımlamanın bir yolu yoktur.
CSS, CSS’nin nasıl davranacağını değiştiren “@” simgesinin önünde yer alan özel talimatlar olan at-kuralları desteğini içerir. Modern bir kod tabanında karşılaşacağınız en popüler at-kurallarından bazıları şunlardır: @media, @font-face, @keyframes, @supports ve @import. Her birini şu şekilde kullanabilirsiniz:
- @media: Cihaz özelliklerine veya ekran boyutu veya renk özellikleri gibi kullanıcının tercihlerine göre stiller uygulamak için kullanılır.
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
- @font-face: Kullanıcının sisteminde mevcut olmayabilecek özel yazı tiplerini tanımlar.
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff');
font-weight: normal;
font-style: normal;
}
- @keyframes: Bir dizi ana kareyi kullanarak animasyonları tanımlar.
@keyframes slide-in {
from {
transform: translateX(-100px);
}
to {
transform: translateX(0px);
}
}
.slide-in-animation {
animation: slide-in 1s ease-in-out;
}
- @supports: Stilleri uygulamadan önce tarayıcının belirli bir özelliği veya özelliği destekleyip desteklemediğini kontrol eder.
@supports (display: grid) {
.grid-container {
display: grid;
}
}
- @import: Harici bir stil sayfasını geçerli stil sayfasına aktarır.
@import url("external-stylesheet.css");
Artılar ve Eksiler
Sass'ın Avantajları
- Güçlü Özellikler: Sass, CSS’nin yeteneklerini artıran güçlü özellikler sunar. Değişkenler, karışımlar ve iç içe yerleştirme, stil sayfalarına daha organize ve bakımı kolay bir yapı sağlar. Bu modülerlik, bir proje genelinde stillerin verimli bir şekilde yönetilmesine ve güncellenmesine yardımcı olur.
- Kapsamlı Topluluk: Sass 10 yılı aşkın bir süredir varlığını sürdürüyor ve bu süre zarfında büyük ve aktif bir geliştirici topluluğu topladı. Bu topluluk desteği, Sass kullanımını kolaylaştıran kaynakların, belgelerin ve üçüncü taraf araçların kullanılabilirliğine katkıda bulunur. Sizin ve diğer geliştiricilerin bu toplulukta çözümler bulması ve en iyi uygulamaları paylaşması daha kolaydır.
- Yerleşik İş Akışı: Sass ön işlemcisi iyi kurulmuş bir iş akışını izler. Geliştiriciler, kısmi parçalar ve içe aktarmalar gibi özelliklerle stil sayfalarını yönetilebilir bileşenlere bölebilir, böylece büyük projelerde stillerin bakımını ve ölçeklendirilmesini kolaylaştırır.
Sass'ın Dezvantajları
- Ek Oluşturma Adımı: Sass kullanmanın ana dezavantajlarından biri, ek bir oluşturma adımına duyulan ihtiyaçtır. Stilleri bir üretim ortamına dağıtmadan önce Sass kodunun standart CSS’ye derlenmesi gerekir. Bu, karmaşıklığa neden olur ve geliştirme iş akışında ek araçlar ve yapılandırmalar gerektirir.
- Öğrenme Eğrisi: Sass’a yeni başlayan geliştiriciler için, özelliklerini etkili bir şekilde anlama ve kullanma konusunda bir öğrenme eğrisi söz konusudur. Faydaları önemli olsa da, özellikle geleneksel CSS’ye daha alışkınsanız, Sass öğrenmeye erken yatırım yapmayı bir dezavantaj olarak algılayabilirsiniz.
CSS'in Avantajları
- Basit Sözdizimi: Native CSS, basit ve anlaşılması kolay bir sözdizimine sahiptir. Bu basitlik, onu tüm beceri seviyelerindeki geliştiriciler için erişilebilir kılar. Stilleri doğrudan CSS’de yazmak, herhangi bir ön işleme adımı gerektirmez, bu da daha hızlı bir uygulamaya olanak tanır.
- Sorunsuz Entegrasyon: Native CSS’de yazılan stiller, HTML ile sorunsuz bir şekilde bütünleşir. Ek bir derleme veya derleme adımına gerek yoktur. Bu basit entegrasyon, geliştirme sürecini basitleştirir ve stillerin hızlı bir şekilde test edilmesine ve uygulanmasına olanak tanır.
CSS'in Dezvantajları
- Özelliklerdeki Sınırlamalar: Native CSS temelleri kapsasa da, Sass gibi ön işlemcilerin sağladığı bazı gelişmiş özelliklerden yoksundur. Değişkenlerin, karışımların ve iç içe yerleştirmenin olmaması, stil sayfalarını daha az modüler hale getirebilir ve daha büyük projelerde bakımını zorlaştırabilir.
- Gelişmiş Özellikler için Tarayıcı Desteği: Belirli gelişmiş özellikler, özellikle de ön işlemcilerle ilişkili olanlar, CSS’de farklı düzeylerde tarayıcı desteğine sahip olabilir. Daha zengin özelliklere sahip alternatifler yerine CSS’yi seçerken bu sınırlamaların farkında olmanız gerekir. Örneğin, modern tarayıcıların çoğu yerel iç içe stili desteklese de, tüm kullanıcılar tarayıcılarının en son sürümlerine sahip değildir. Bu nedenle ayrıştırıcı iç içe geçmiş stilleri düzgün şekilde yorumlayamayabilir.
Sass ve CSS: Birinden Diğerine Geçiş Yapmadan Önce Dikkat Edilmesi Gerekenler
- Proje Karmaşıklığı: Sass, karışımlar, özel işlevler ve yerleştirme gibi sağlam bir dizi özellik sunduğundan, yüksek derecede organizasyon ve ölçeklenebilirlik gerektiren daha büyük projelerde genellikle parlak bir şekilde parlıyor. Bir projenin karmaşıklığı arttıkça stilleri modüler bileşenlere ayırma yeteneği giderek daha avantajlı hale gelir.
- Ekip Uzmanlığı: Ekibinizin mevcut becerilerini değerlendirmek, projenize hangi aracı ekleyeceğinize karar vermenize yardımcı olabilir. Ekibiniz Sass konusunda bilgiliyse, özelliklerinden yararlanmak üretkenliği ve kod kalitesini büyük ölçüde artırabilir. Ancak CSS ekibinizin uzmanlığıyla yakından uyumluysa veya öğrenme eğrisini sınırlayabilecek zaman kısıtlamaları varsa CSS’e bağlı kalmak en iyi seçim olabilir.
Sonuç
Sass ve CSS arasında karar vermek tamamen projenizin nüanslarını ve ekibinizin uzmanlığını dikkate almakla ilgilidir. CSS uzun bir yol kat etti ve kullanım durumlarınızın çoğunda Sass gibi bir ön işlemciye ulaşmanın gerekli olmadığını görebilirsiniz. Hangisinin size veya projenize en uygun olduğunu görmek için her zaman her iki aracı da deneyebileceğinizi unutmayın. Bu, sizin ve benzersiz durumunuz için en iyi olanı bulmakla ilgilidir.
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
