Blog

SCSS (Sassy CSS), CSS'nin genişletilmiş bir versiyonudur ve daha fazla özellik ve esneklik sunarak stil kodlamasını daha etkili hale getirir. SCSS, SASS (Syntactically Awesome Stylesheets) adlı bir CSS ön işlemcisidir ve SASS'ın yeni ve geliştirilmiş sözdizimini kullanır.

SCSS ve SASS arasındaki ana fark, sözdizimidir. SASS, daha açık ve kısa bir sözdizim kullanırken, SCSS, daha geleneksel CSS benzeri bir sözdizimini tercih eder. Yani, SCSS dosyaları genellikle mevcut CSS dosyalarını daha kolay bir şekilde dahil edebilir ve aynı zamanda daha rahat bir geçiş sağlar.

SCSS'in bazı temel özellikleri şunlardır:

1. Değişkenler: SCSS, değişkenler kullanarak renkler, fontlar, boyutlar gibi değerleri depolamanıza olanak tanır. Bu, tasarımınızdaki tutarlılığı sağlamak ve değerleri daha kolay güncellemek için kullanışlıdır.

               
   
               
   
                   scss
               
               
   
                   
                       $main-color: #3498db;
                        body {
                        background-color: $main-color;
                       }
                       
               
           
       

2. İç içe geçmiş Stiller: SCSS, stil kurallarını daha anlaşılır hale getirmek için iç içe geçmiş bir yapı sağlar.

               
   
               
   
                   scss
               
               
   
                   
                       nav {
                       ul {
                         margin: 0;
                         padding: 0;
                         list-style: none;
                       }
                     
                       li {
                         display: inline-block;
                         margin-right: 10px;
                       }
                     }
                     
               
           
       

3. Miksindirler (Mixins): SCSS, tekrar kullanılabilir mixinler ile stil kurallarını gruplandırmanıza ve birleştirmenize olanak tanır.

               
   
               
   
                   scss
               
               
   
                   
                       @mixin border-radius($radius) {
                       -webkit-border-radius: $radius;
                       -moz-border-radius: $radius;
                       border-radius: $radius;
                     }
                     
                     .box {
                       @include border-radius(10px);
                     }
                     
               
           
       

4. İmport: SCSS dosyalarını birleştirme işlemi daha kolaydır, çünkü @import komutu sayesinde başka SCSS dosyalarını içe aktarabilirsiniz.

               
               
   
               
   
                   scss
               
               
   
                   
                       @import "reset";
                       @import "base";
                       @import "layout";
                       
               
           
       

Bu özellikler, SCSS'in CSS yazımını daha modüler, okunabilir ve bakımı kolay hale getirmesini sağlar. SCSS dosyaları genellikle tarayıcılar tarafından doğrudan anlaşılamaz, bu nedenle kullanılmadan önce bir CSS ön işlemci (örneğin, Sass veya Node-sass) kullanılarak CSS'e derlenir.