Sass ve Kullanım Örnekleri

Sass veya “Syntactically Awesome StyleSheets”, CSS’nin bir dil uzantısıdır. Sass  söz dizimi kullanılarak yazılan kodu günün sonunda yine css çevirir. Css’de olmayan özellikleri kullanmanızı sağlar. Değişken vs kullanabilirsiniz.  Kullanacağımız dosya uzantısı .scss dir.

$Değişkenleri kullanmak

burada değişkenler $ işareti ile tanımlanır.  Aşağıda header-color ile kırmızı rengi  ve main-fonts ile font tanımlayıp o değişkeni h1 etiketine verdim.

$header-color :red;
$main-fonts: Arial, sans-serif;

  .blog-post, h2 {
    color: $header-color;
    font-family:$main-fonts
  }
</style>

<div class="blog-post">
  <h1>Derinkod</h2>
</div>

İç içe css yazmak

Sass’ın güzel yanlarından birisi iç içe css yazmak. Hangi elemana css yazdığınızın daha kolay anlaşılması düzen açısından daha iyi ve pratik. Aşağıdaki örnekte gördüğünüz üzere html yazıyormuş gibi blog-post divinin altındaki h1 e class yazdık. Csste de aynı şekilde blog-post classının içinde tanımladık böylece sadece buradakiler etkilendi. P etiketi için yazdığımız classta aynı sırada olduğunu göreceksiniz.

  .blog-post {
  h1 {
      text-align: center;
      color: blue;
    }
    p {
      font-size: 20px;
    }
  }
 
 
</style>

<div class="blog-post">
  <h1>Sass örnekleri</h1>
  <p>Deneme yazısı</p>
</div>

@Mixin ile Yeniden kullanılabilir CSS oluşturma

yeni css özellikleri tüm tarayıcılar hemen desteklemek bunun için zaman zaman tarayıcılara özel kodlar yazmak gerekiyor. Diyelim bir diviniz var ve buna 15px radius vereceksiniz. Başka yerde de bunu kullanmak istiyorsunuz. Aynı yerde kod tekrarı yapmamak için bunu kullanabilirisiniz.

@mixin border-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
}


  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
   @include border-radius(15px);

  }
</style>

<div id="awesome"></div>

Css de  @if ve @else kullanımı

Bildiginiz gibi düz css de if else yok. Bazı mantıksal durumlarda buna çok ihtiyaç oluyor. Bu sass’ın bize kolaylıklarından birisi. Aşağıdaki örnekte bir kutuya border-stroke değeri (medium) atayacağız .Eğer medium ise kenar çizgilerini 6px siyah yapacağız. Diğer koşullarıda kontrol edip farklı değerler vereceğiz.

@mixin border-stroke($val){
 @if $val == light {
  border: 1px solid black;
 }
 @else if $val == medium {
   border:3px solid black;
 }
 @else if $val == heavy {
   border:6px solid black;
 }
 @else {
   border:none
 }
}


  #box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
  }
</style>

<div id="box"></div>

Css ‘ de @for döngüsünü kullanmak

For kullanırken başlangıç ve bitiş değeri vermek gerekiyor. Aşağıdaki örnekte classların hepsini  sayısına göre font-size değerlerini 15px büyüteceğiz.

@for $j from 1 through 5 {
 .text-#{$j} {font-size: 15 * $j}
}

</style>

<p class="text-1">Derinkod</p>
<p class="text-2">Derinkod</p>
<p class="text-3">Derinkod</p>
<p class="text-4">Derinkod</p>
<p class="text-5">Derinkod</p>

@while döngüsü  kullanımı

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

Css’leri daha küçük parçalara bölmek

Büyük projelerde kod okunabilirliği kolay olsun diye css kodları parçalar halinde tutulur. İçe içe aktarılır. Sass partial dosyalarını isimlendirirken ön ek olarak başına _ işaretini koymamız gerekiyor._ o dosyanın bir partial sass olduğunu belirtir.  Bütün cssleri  main.scss te topladığımızı düşünelim.  _variables dosyasını buraya import edelim. ( import ederken _ kullanmamıza gerek yok)

// The main.scss dosyası

@import 'variables'

@Extend Kullanımı

Bir özelliği başka bir etikete vermek gibi düşünebilirsiniz. Bir div var çerçevesi vs kutu gibi işimize yarar diyoruz bunu aynısını tekrar yapmaktansa extend edip. Kod tekrarından kaçınıyoruz.

  h3{
    text-align: center;
  }
  .info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }
 
   .info-important {
    @extend .info;
    background-color: magenta;
  } 



</style>
<h3>Posts</h3>
<div class="info-important">
  <p>buraya direk extend ediyoruz. Kutu şekli geliyor. Biz arkaplanı mor yapalım diyoruz </p>
</div>

<div class="info">
  <p>örnek bir kutumuz var çerçevesi vs olan istiyoruz ki bu özellikleri direk aynısını baskasında kullanalım tekrar yazmayalım. </p>
</div>

Bu örnekleri kafadan yapmadım freecodecamp üzerinden sass çalışıyordum. Dedim öğrendiklerimi hem uygulayım hem uyarlayıp buraya yazayım.  Umarım iş görür en kötü ben kullanırım 🙂

Birde sass kurulumu vs var. Onlarıda başka zamana artık .

Bir cevap yazın