SASS Nedir? SASS Ne İşe Yarar? SASS, web sayfalarını tasarlarken CSS’de bulunmayan özellikleri kullanmanıza olanak tanıyan bir ön işlemci kodlama dilidir. Bazı fonksiyonların önekleriyle çalışmak, büyük ölçekli projelerde uzun CSS kodları yazmak, CSS’de bazı hesaplamalar yapmak, aynı CSS özelliklerini tekrar tekrar yazmak gibi sorunları en aza indirmek için tasarlanmış SASS CSS derleyicisini indirebilirsiniz.
SASS Nedir?
SASS, Syntactically Awesome Style Sheets Türkçe anlamı ile Sözdizimsel Müthiş Stil Sayfaları ifadesinin kısaltmasıdır. SASS, CSS’i daha etkili ve verimli bir şekilde yazmanıza olanak tanıyan bir ön işlemci dilidir. CSS’in bir uzantısı olarak görülebilir ve CSS’in sahip olduğu bazı sınırlılıkları aşarak daha dinamik ve modüler stil dosyaları oluşturmanıza yardımcı olur. SASS, CSS’in yapısını daha programatik ve yeniden kullanılabilir hale getirerek web geliştirme sürecini hızlandırır ve kolaylaştırır.
SASS’ın Özellikleri:
- SASS, renkler, font boyutları gibi sık kullanılan stil değerlerini değişkenlerde saklamanıza olanak tanır. Bu, kodun tekrar kullanılabilirliğini artırır ve büyük stil sayfalarında değişiklik yapmayı kolaylaştırır.
- SASS, CSS seçicilerini iç içe yerleştirme yeteneği sunar, bu da kodunuzun daha okunabilir ve organize olmasını sağlar.
- SASS, belirli stil bloklarını tekrar kullanmanızı sağlayacak karışımlar (mixins) oluşturmanıza olanak tanır. Bu, özellikle tarayıcı öneklerini yönetirken zaman kazandırır.
- SASS, renkleri manipüle etmek, matematiksel işlemler yapmak gibi işlemleri gerçekleştirmenize olanak tanıyan fonksiyonlar içerir.
- SASS, döngüler ve koşullu ifadeler kullanarak daha dinamik ve esnek stil sayfaları oluşturmanıza olanak tanır.
- SASS, stil sayfalarınızı daha küçük, yönetilebilir parçalara bölmek için “partials” ve “import” özelliklerini kullanmanıza olanak tanır. Bu, projelerin organize kalmasını sağlar.
SASS Ne İşe Yarar?
SASS, web geliştiricilerin CSS ile daha etkin ve verimli bir şekilde çalışmalarını sağlayan bir ön işlemci dilidir. CSS’in geliştirilmiş bir sürümü olarak düşünülebilir ve web sayfalarının stilini belirlemek için kullanılan standart CSS kodlarını daha dinamik, modüler ve tekrar kullanılabilir hale getirir.
SASS İle:
- SASS, stil dosyalarını daha hızlı yazmanıza ve yönetmenize olanak tanır. Değişkenler, karışımlar (mixins) ve fonksiyonlar gibi özellikler sayesinde, tekrar eden CSS kodlarını azaltabilir ve daha az kodla daha fazla iş yapabilirsiniz.
- SASS, iç içe kurallar kullanarak, ilişkili stil kurallarını birbirine yakın tutmanıza olanak tanır. Bu, özellikle büyük ve karmaşık stil sayfalarında kodun okunabilirliğini ve anlaşılabilirliğini artırır.
- SASS, stil sayfalarınızı daha küçük, yönetilebilir parçalara ayırmanıza olanak tanır. Bu “parçalar” daha sonra ana stil dosyanıza dahil edilebilir. Bu, projenin organizasyonunu iyileştirir ve ekip içinde iş birliğini kolaylaştırır.
- SASS, matematiksel işlemler, döngüler ve koşullu ifadeler gibi programlama dili özellikleri sunar. Bu, stil dosyalarınızda karmaşık mantık uygulamanıza ve dinamik stil çözümleri oluşturmanıza olanak tanır.
- SASS, CSS3 özelliklerinin tarayıcı öneklerini (vendor prefixes) otomatik olarak yönetebilen karışımlar (mixins) kullanmanıza olanak tanır. Bu, farklı tarayıcılar arasında tutarlı bir görünüm sağlamak için gereken çabayı azaltır.
- SASS, projenin stil yönünü daha hızlı geliştirmenize yardımcı olur. Değişiklik yapmak istediğinizde, yalnızca bir yerde değişiklik yapmanız yeterlidir ve bu, tüm projeye yayılır. Bu, özellikle renkler, font boyutları ve düzen özellikleri gibi sıkça değiştirilen özellikler için zaman tasarrufu sağlar.
SASS ve SCSS Farkı Nedir?
SASS, iki farklı sözdizimi sunar: SASS ve SCSS. SCSS, CSS’e daha yakın bir sözdizimine sahiptir ve geçerli CSS kodunun SCSS dosyalarına kolayca kopyalanıp yapıştırılabilmesini sağlar. SASS sözdizimi ise daha kısa ve daha az ayrıntılıdır. Pratikte, “SASS” terimi genellikle SCSS sözdizimini de içerecek şekilde kullanılır.
SASS, web geliştiricilerine daha güçlü ve esnek stil sayfaları oluşturma yeteneği sunarak, CSS ile yapılan işleri daha akıllı ve hızlı bir şekilde gerçekleştirmelerine olanak tanır. Bu, özellikle büyük ve karmaşık web projelerinde zaman ve çaba tasarrufu sağlar.
SASS Nasıl Kullanılır?
SASS kodlarını yazdıktan sonra dosyayı 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;
- }
Daha sonra 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:\layihə
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 dönüştürecek ve test.css adı ile aynı klasöre kaydedecektir. Ancak bunu her seferinde tekrarlamak zaman alır. 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 –no-cache seçeneğini eklememiz yeterlidir.
- 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 depolanır ve temel olarak birden fazla SASS dosyası bir klasörde derlenir.
- sass –no-cache –watch SCSS:CSS
Komut dosyasıyla oluşturulan SASS dosyaları derlenecek ve CSS adlı bir klasöre kopyalanacaktır. SASS dosyaları derlendikten sonra bir harita dosyası oluşturulur. Bunu 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 formatta çıkmasını istiyorsanız -style özelliğini iç içe (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 derlenmiş 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.
Profesyonel Web Tasarım hizmeti almak için bizimle iletişime geçebilirsiniz.
Antalya Medya Ajans: Instagram
İlginizi Çekebilir 👇