SASS Nedir, Ne İşe Yarar? SASS İle Neler Yapılır? SASS Nasıl Kullanılır? SASS (Syntactically Awesome Style Sheets) yani Sözdizimsel Olarak Harika Stil Sayfaları, web sayfalarını tasarlarken CSS’de bulunmayan özellikleri kullanmanıza izin veren bir önişlemci betik dilidir. Gelin hep birlikte SASS hakkında tüm bilinmesi gerekenleri öğrenelim.
SASS Nedir, Ne İşe Yarar?
SASS (Syntactically Awesome Style Sheets), web geliştirme sürecinde kullanılan bir CSS preprocesörüdür. CSS’in özelliklerini geliştirerek daha etkili ve verimli bir şekilde stil oluşturmayı sağlar. SASS, CSS yazma deneyimini geliştirmek için daha fazla özellik ve işlevsellik sunar.
İşte SASS’in başlıca özellikleri ve ne işe yaradığı:
Değişkenler: SASS, CSS kodunda kullanılan değerleri değişkenlere atamak için kullanılır. Bu sayede aynı değeri birden çok kez kullanmanız gerektiğinde sadece bir kez tanımlamanız yeterlidir. Bu, stil dosyalarının daha düzenli, okunabilir ve yönetilebilir olmasını sağlar.
Yerleşik Matematiksel İşlemler: SASS, stil dosyalarında matematiksel işlemler yapmanızı sağlar. Bu, örneğin genişlik veya yükseklik gibi özellikleri hesaplamak veya renkler üzerinde işlemler yapmak için kullanılabilir.
İç İçe Geçmiş Kurallar: SASS, stil dosyalarında CSS kurallarını iç içe geçirmenize olanak tanır. Bu, daha modüler ve yapılandırılmış bir stil kodu oluşturmanızı sağlar. Örneğin, bir div içindeki bir linkin stiline erişmek için sadece üstteki div’in sınıfını kullanmanız yeterlidir.
Mixinler: Mixinler, SASS’ta tekrar kullanılabilir CSS kodu bloklarıdır. Örneğin, farklı tarayıcılar için ön ekler eklemek veya medya sorgularını kolayca tanımlamak için mixinler kullanılabilir. Mixinler, stil kodunun daha az tekrar edilmesini sağlar ve bakımı kolaylaştırır.
İmport Etme: SASS, stil dosyalarını daha düzenli bir şekilde organize etmek için stil dosyalarını birleştirmenize olanak tanır. Bu, stil dosyalarını farklı bölümlere ayırarak ve bunları ana stil dosyasına dahil ederek projenin düzenini sağlar.
SASS, web geliştiricilerine daha verimli, sürdürülebilir ve modüler CSS kodları oluşturma imkanı sağlar. Daha az tekrar eden kod, kolaylıkla değiştirilebilirlik, daha iyi düzenleme ve bakım kolaylığı gibi avantajlar sunar. Ayrıca, SASS’ın SCSS sözdizimi CSS’e çok benzemektedir, bu da mevcut CSS dosyalarını kolayca dahil etmenizi sağlar ve hızlı bir şekilde başlamayı kolaylaştırır.
SASS Nasıl Kullanılır?
SASS kodlarını yazdıktan sonra, dosyayı bir CSS dosyasına dönüştürmek için derlemeniz gerekir.
Öncelikle aşağıdaki SASS kodunu test.scss olarak kaydedelim.
$font-family: Helvetica, sans-serif;
$primary-color: crimson;
body {
font: 100% $font-family;
background-color: $primary-color;
}
Ardından kaydettiğimiz klasörün yolunu komut satırında belirtelim. Örneğin, dosyayı proje dizininde C: bölümünün altına kaydettiyseniz, komut satırına aşağıdaki komutu yazmanız yeterlidir.
cd c:\
Komut istemi, çalıştığımız dizini gösteriyorsa, aşağıdaki komutu yazmanız yeterlidir.
sass test.scss:test.css
Komuttan sonra SASS bize yazılan SASS kodlarını CSS kodlarına çevirecek ve test.css ismiyle aynı klasöre kaydedecektir.
Değişiklikleri yaptıktan sonra derlemek için -watch parametresini eklememiz gerekiyor.
sass –watch test.scss:tesst.css
asd
Komut penceresi açık olduğu sürece, dosyada değişiklik yapıldığında SASS dosyalarını derleyecektir.
Derleme işlemi sırasında, SASS bir önbellek dosyası ve dizin oluşturur.
Önbellek dosyası ve klasör oluşturmayı durdurmak için, sadece –no-cache seçeneğini eklememiz gerekiyor .
sass –no-cache –watch test.scss:test.css
SASS genellikle büyük ölçekli projelerde kullanıldığından, SASS dosyaları ayrı CSS dosyalarında saklanır ve temel olarak birden çok SASS dosyası bir klasörde derlenir.
sass –no-cache –watch SCSS:CSS
Komut dosyası içeren SASS dosyaları derlenecek ve CSS adlı bir klasöre kopyalanacaktır.
SASS dosyaları derlendikten sonra bir harita dosyası oluşturulur, devre dışı bırakmak için –source-map=none parametresini eklemeniz yeterlidir.
sass –no-cache –watch –sourcemap=none SCSS:CSS
SASS dosyalarını derledikten sonra, oluşturulan CSS dosyasının sıkıştırılmış veya farklı bir biçimde çıktı almasını istiyorsanız, -style özelliğini yuvalanmış (varsayılan), kompakt, sıkıştırılmış veya genişletilmiş olarak ayarlayabiliriz.
sass –no-cache –watch –sourcemap=none –style=compressed SCSS:CSS
Artık derlenen SASS dosyaları sıkıştırılmış CSS formatında kaydedilecektir. Diğer parametreler hakkında bilgi almak için komut satırına aşağıdaki komutu yazmanız yeterlidir.
sass –help
Bunlar, SASS kullanımında ve derlenmesinde en sık kullanılan parametrelerdir.
Antalya Medya Ajans: Instagram
İlginizi Çekebilir 👇