Scss Hakkında Her şey

Merhaba size bugün bir ön derleyici bir dilin altyapısını öğreteceğim.

Scss, css’den farklı olarak birçok özelliğe sahiptir. Bunların başında bir programlama dili gibi içerisinde farklı şeylerin bulunması.

(Görsel, I.)

Nesting yapısı:

.div{
    .div1{

    }
}

// or 

header{
    nav{
        ul{
            li{
                a{

                }
            }
        }
    }
}

& kullanımı:

h1{
    &:hover{

    }

    &#icon {
    }
}

Mixin kullanımı:

@mixin func($ArkaplanRengi, $YaziBoyutu){
    background-color: $ArkaplanRengi;
    font-size: $YaziBoyutu;
}

Include ile Mixin’ı kullanmak:

h1{
    @include func(red, 18px);
}

% ile sabit kod kümesi oluşturmak:

%ornek{
    color: blue;
    padding: 15px;
}

extend ile %’yi kullanmak:

h1{
    @extend %ornek;
}

if yapısı:

@if $kosul {
   //code
} 
  
@else if $kosul {
   //code
}
@else {
   //code
}

Değişken tanımlama:

$mavi: blue;
$headerSize: 20px;

For kullanımı:

$result: 1;
$exponent: 5;
@for $_ from 1 through $exponent {
    $result: $result * 5;
 }

Each kullanımı:

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

Function kullanımı:

@function responsiveText($size) {
  @return $size * 4;
}

// functionu çağırmak
font-size: responsiveText(10px);

Bundan ötürü, sass ise şöyle bir sözdizimi (syntax) sunar:

h1
   font-size: 15px;

Bu sözdiziminde, süslü parantezler bulunmaz. Aynı nodejs’deki pug gibi kullanımı mevcuttur.

Scss dosya yapısıda önemlidir. Bununla ilgili bir örnek verecek olursak eğer:

sass/

• main.scss
• /base
  _fonts.scss
  _mixins.scss
  _reset.scss
  _variables.scss
  _sprites.scss
• /components
  _modal.scss
  _navigation.scss
• /pages
  _home.scss
  _about.scss
• /layout
  _footer.scss
  _header.scss
  _layout.scss
• /vendors
  _colorpicker.scss
  _swiper.scss

Nasıl derleyeceğiz diyecek olursanız:

Vscode eklentisi Live Sass Compiler ile derleyebilirsiniz.

Ayrıca Ruby ile de bir derleyici ayarlayabilirsiniz. Ama bu benim tercih ettim bir şey değil.

Javascript derleyicileri kullanabilirsiniz. Gulp, Webpack, Parcel, Rollup, Vite gibi frontend araçları derleme yapabilirsiniz.

Bunların harici Nodejs’deki sass cli ile de derleyebilirsiniz.

Eğer bir frontend framework’ü kullanırsanız, react, vue veyahût svelte bunlar da pek bir ayara ihtiyacınız yok. Sadece npm i sass demeniz yeterli. Svelte buna istisna ama sadece onda da birkaç ufak ayar haricî hemen kullanabilirsiniz.

İyi kodlamalar!