Web tasarımı söz konusu olduğunda, gölgeler sayfalarınıza çok fazla derinlik ve boyut katabilir. Ama ne yazık ki, gölgeler oluşturmak biraz zor olabilir....
SASS ve SCSS Nedir? Nasıl Kullanılır?
Bu yazımda CSS'in genişletilmiş bir versiyonu olan SASS (Syntactically Awesome Style Sheets)'ı ele alacağım. CSS yazma deneyimini geliştiren ve stil tabanlı projelerde daha verimli çalışmayı sağlayan bir CSS preprosesörüdür. SASS, daha organize ve yönetilebilir bir CSS kodu oluşturmak için bazı özellikler ekler ve CSS yazmayı daha esnek hale getirir. SASS dosyaları .scss uzantılı olup derlendiğinde .css uzantılı dosyalar oluşturur.
Visual Studio Code programında SASS dosyamızda her değişiklik olduğunda otomatik olarak ilgili dosya adında bir .css dosyası oluşturması için "Live SASS Compiler" eklentisini kullanabilirsiniz. Eklenti SASS dosyasında her yaptığınız değişikliği otomatik olarak güncelleyecektir.
Genel olarak da SASS ve SCSS nedir, nasıl kullanılır, hangi özellikleri barındırır gibi konulara değinmeye çalışacağım. Yazının sonunda detaylı bilgiler içeren SASS-101 GitHub repomun linkine ulaşabilirsiniz.
SASS, CSS'i daha etkili ve okunabilir hale getirmek için birden fazla özelliğe sahiptir. İşte SASS'in bazı temel özellikleri:
Değişkenler
SASS, CSS'teki değerleri tekrar tekrar kullanmak için değişkenleri destekler. Bir değişken tanımlayarak, stil değerlerini bir yerde güncellediğinizde otomatik olarak tüm kullanımlarını güncelleyebilirsiniz.
Örneğin:
$ana-renk: #ff0000;
a {
color: $ana-renk;
}
h1 {
color: $ana-renk;
}
Bu örnekte, $ana-renk değişkeni #ff0000 değerine sahiptir ve bu renk, hem a hem de h1 elemanları için kullanılır. Renk değiştiğinde, sadece değişkeni güncellemek yeterlidir.
Yumuşak Düşme (Nesting)
SASS, HTML elemanlarının iç içe geçmiş yapısını yansıtan bir stil yapısı sunar. Bu, CSS yazmayı daha düzenli ve anlaşılır hale getirir.
Örneğin:
nav {
ul { margin: 0; padding: 0; list-style: none;
li { display: inline-block; margin-right: 10px;
a { color: $ana-renk; text-decoration: none;}
}
}
}
Bu örnekte, nav içindeki ul, li ve a elemanları birbirine gömülüdür. Bu, CSS'in daha ayrıntılı hedeflemesini ve daha temiz bir stil yapısını destekler.
Mixin'ler
Mixin'ler, tekrar kullanılabilir stil tanımlamalarını oluşturmanızı sağlar. Bir mixin tanımlayarak, stil kodunuzda belirli bir stil kümesini birden çok yerde kullanabilirsiniz.
Örneğin:
@mixin kutu-döndür {
transform: rotate(10deg);
}
.kutu {
width: 100px; height: 100px; background-color: #ccc;
@include kutu-döndür;
}
Bu örnekte, kutu-döndür adında bir mixin tanımlanmıştır ve .kutu sınıfı bu mixin'i kullanmaktadır. Bu sayede, kutu sınıfının stilindeki dönme işlemi (transform) mixin'in içinde tanımlanan değeri kullanarak gerçekleşir.
İçe Aktarma (Import)
SASS, birden çok stil dosyasını tek bir dosyada birleştirmek için içe aktarmayı destekler. Bu, projenizin stil kodunu modüler hale getirir ve daha kolay yönetilebilir yapar.
Örneğin:
@import 'reset'; @import 'layout'; @import 'typography';
Bu örnekte, reset, layout ve typography olmak üzere üç ayrı stil dosyası içe aktarılır. Böylece, tek bir SASS dosyasında tüm stil kodunuzu yönetebilirsiniz.
Döngüler (For)
SASS'ta kendi içerisinde dinamik classlar yazabilmek için döngüler kullanabilirsiniz.
Örneğin:
@for $x from 1 through 10 {
.font-size-#{$x} {
font-size: 0px + $x;
}
}
Scss sayesinde for döngülerini de kullanabiliriz. Aşağıdaki kullanım ile ".font-size-1" den başlayıp ".font-size-10" a kadar css classı oluşturacaktır.
Koşullar (If)
SASS içerisinde farklı durumları yönetebilmek adına if koşulları kullanabilirsiniz. Farklı koşullara göre farklı davranışlar sergilemesini sağlayabilirsiniz.
Örneğin:
$title: red; $sub-title: green;p.if { @if $title==red { color: blue; }@else if $sub-title==green { color: yellow; }@else { color: black } }
SASS içerisinde farklı durumları bu tarz kullanımlar ile yönetebilirsiniz.
Bu yazımda detaylarına inmediğim diğer konu başlıkları aşağıdaki gibidir. GitHub repomda bu konulara ait örnekleri ve açıklamaları bulabilirsiniz.
String Fonksiyonlar
Numeric Fonksiyonlar
List Fonksiyonlar
Map Fonsiyonlar
Selector Fonksiyonlar
Introspection Fonksiyonlar
SASS, daha fazla özelliğe sahip olup bu özellikler sayesinde CSS yazmayı daha esnek ve verimli hale getirir. SASS kodunuzu daha sonra CSS'e dönüştürmek için Sass derleyicisi kullanmanız gerekmektedir. Sass derleyicisi, SASS kodunu alır ve standart CSS dosyası olarak çıktı verir.
SASS, CSS geliştirme sürecini büyük ölçüde kolaylaştıran bir araçtır. Daha organize ve düzenli bir stil kodu oluşturmanızı sağlar, tekrar kullanılabilir stil tanımlamalarını destekler ve stil tabanlı projelerde daha verimli çalışmanıza yardımcı olur. SASS kullanarak, CSS yazarken daha az tekrarlamaya ve daha fazla esnekliğe sahip olursunuz.
SASS-101 adlı GitHub repoma buradan ulaşabilirsiniz. Başlangıç için fikir edinmeniz için yararlı olacağını düşünüyorum.
Umarım faydalı olmuştur. İyi çalışmalar dilerim.
Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.