CSS, çarpıcı bir web sitesi oluşturmak için stil, tasarım, düzen ve ihtiyacınız olan her şeyi tanımlamak için HTML öğelerinin bir web sayfasında nasıl görüntülenmesi gerektiğini etkili bir şekilde tanımlamak için önemlidir. Ancak büyük, karmaşık sitelerle çalışmaya başladığınızda, CSS’in iyi olup olmadığını merak etmeye başlayabilirsiniz. 

SASS nedir?

SASS yani söz dizimsel stil sayfaları, CSS yazmayı çok daha güçlü hale getiren değişkenler içerir. Matematiksel işlemler, karışımlar, döngüler, işlevler, içe aktarmalar ve diğer ilginç işlevleri kullanmanızı sağlayan bir CSS ön işlemcisidir. 

Bazı açılardan, SASS’yi bir stil sayfası genişletme dili olarak düşünebilirsiniz. Çünkü temel bir programlama dilinin faydalarını sunarak standart css özellikleri genişletilebilir. Böylece SASS, kodunuzu derleyecek ve bir tarayıcının anlayabileceği CSS çıktısını oluşturacaktır.

SCSS ile CSS Uyumlu Söz Dizimi Mümkün mü?

CSS’i biliyorsanız, SASS’ı da zorlanmadan öğrenir veya bilirsiniz. SASS, iki farklı sözdizimiyle gelir: SASS’ın kendisi ve en çok kullanılan SCSS’tir. SCSS sözdizimi CSS uyumludur. Bu sebeple .css dosyanızı .scss olarak yeniden adlandırmanız yeterlidir. İlk SCSS dosyalarını tıpkı bu biçimde oluşturabilirsiniz.
 
Tabi ki bunu yaparak SASS’ın sağladığı süper güç ve yeteneklerin hiçbirini kullanmış olmuyorsunuz.  Ancak en azından SASS‘ı kullanmaya başlamak için saatler harcamanıza gerek olmadığını anlamış oluyorsunuz. Bu başlangıç ​​noktasından itibaren, ilerleme kaydettikçe SASS sözdizimi öğrenimi daha da etkin ve kolaylıkla sağlanabilir.

SASS İstediğiniz Değişkeni Kullanma Olanağı Sunar

SASS gibi bir CSS ön işlemcisi kullanmanın en büyük faydasından birisi değişkenleri kullanma yeteneğidir. Bir değişken, bir dizi değeri depolamanıza ve bu değişkenleri SASS dosyalarınızda istediğiniz kadar kullanma olanağı tanır.

Aynı zamanda istediğiniz yerde yeniden kullanmanıza da olanak sunar. Her yerde harika bir mavi renge sahip bir site inşa ettiğiniz bir senaryo hayal edebilirsiniz.
Düğmeler, menüler, simgeler, kapsayıcılar vb.
Ayrıca birkaç harika yazı tipi kullanıyorsunuz: Ubuntu ve Nunito. 
 
Geleneksel CSS’yi kullanarak, aynı kodu defalarca tekrarlamanız gerekir, ancak SASS ile bu değerleri değişkenler olarak saklayabilirsiniz: 

$blue: hsl(215deg 100% 35%);
$montserrat-font: 'Montserrat', 'Arial', 'Roboto', sans-serif;
$fredoka-font: 'Fredoka', 'Arial', 'Roboto', sans-serif;

Değişkenlerini oluşturduktan sonra, bunları ihtiyacınız olan her yerde şu şekilde kullanabilirsiniz:

h1 {
  font: $montserrat-font;
  color: $blue;
}
a {
  font: $fredoka-font;
  background-color: $blue;
  padding: 16px;
}

SCSS dosyalarınızı derlediğinizde, SASS kullandığınız değişkenlerle ilgilenir. Değişken adını saklanan değeriyle değiştirir. Tabii ki, rengin değerini değiştirmek, değişken içeriğini güncelleme ve yeniden derlemek kadar hızlı gerçekleşir. CSS dosyasında renk güncellemek için kullanılmakta olan bul – değiştir özelliği de bu sayede geride kalmış olur.

SCSS Kullanmanın Avantajları

SCSS daha açıklayıcı bir özelliğe sahiptir
Kuralların düzgün kod yerleşimini teşvik eder
Kullanıcılara daha iyi satır içi dokümantasyon oluşturma olanağı sunar
Mevcut CSS araçlarının ve CSS kod tabanlarının entegrasyonu da kolaylıkla yapılır.

Yazan : Barış Doğan Sütçü

:is() alibaba android backend developer css css grid CSS HTML css kodları css masonry css nedir CSS püf noktalar css satır sınırlama css webkit-line-clamp css yeni özellikler CSS Öğren dart EACH favicon favicon nasıl eklenir favicon nedir flutter frontend developer frontend developer özellikleri html html nedir HTML siteye favicon ekleme ios iphone java javascript javascript nedir js kullanici deneyimi list map mobil responsive nodejs SASS SCSS scss ile each kullanımı seo seo nasıl yapılır seo nedir Temel CSS Yapılandırılmış Veri

1
.
Like Reaction
0
.
Like Reaction
0
.
Like Reaction
0
.
Like Reaction
0
.
Like Reaction