Sass ne Scss ne alaka?

İkisi de hızlı bir şekilde CSS kod yazabilmeniz için ortaya çıkmıştır.Ben düz CSS'e çok fazla alıştığım için geçiş yaparken SCSS bana daha kolay geldi ve burda da kolaylıklarını sizlere örneklerle aktarmaya çalışacağım.

Dipnot: Fatih Hayrioğlu - Sass vs Scss Hakkında?

SCSS nedir?

SCSS, basitçe Sassy CSS anlamına gelir. Sassy CSS, Vanilya (normal) CSS'de bulunmayan özellikleri kullanmanızı sağlayan bir CSS ön işlemcisidir.
Bu makalede, bu özelliklerin bazılarını sizlere örneklerle listeleyeceğim ve açıklayacağım.

Değerler (Variables)

SCSS'de değişkenleri kolayca tanımlayabilirsiniz. Bir değişken oluşturmak için değişken ismine bir $ işareti ekleyin ve bunları normal bir CSS özelliği gibi ayarlayın.

// Font-weight for a project

$font-light : 400
$font-thick: 500
$font-heavy: 600

.element{
    Font-weight: $font-light;
}

//color palette for a project to maintain consistency

$product-dark-blue:      #324e85
$product-light-blue:     #4c7396
$product-lighter-blue:   #9bb7cf

.element{
    color: $product-dark-blue;
}

İç İçe Koyma (Nesting)

SCSS, CSS kurallarını yerleştirmenizi sağlar.

// vanilla CSS

.container {
  Width: 100%;
  Color: grey;
  Background-color: green;
}
.container div {
  Border: 1px solid black;
}
.container div a {
  text-decoration: none;
  color: #f2f2f2;
}
.container div a::hover {
  color: #b2b2b2;
}

// SCSS

.container {
  width: 100%;
  color: grey;
  background-color: green;

  div {
    border: 1px solid black;

    a {
      text-decoration: none;
      color: #f2f2f2;
      &::hover {
        color: #b2b2b2;
      }
    }
  }
}

@extend ve @mixin Kullanımı

@extend

Başka bir sınıfın özelliklerini miras almanıza yardımcı olur.

// SCSS
.header {
  color: grey;
}

.sub-header {
  @extend .header;
  font-size: 40px;
}

CSS'te çıktısını bu şekilde alırısınız.

// Compiled CSS

.header, .sub-header {
  color: grey;
}

.sub-header {
  font-size: 40px;
}

@mixin

Mixin, SCSS'nin bir diğer değer verme yoludur. Önce mixin'i @mixin kullanarak yaratırsınız, sonra @include kullanarak bu özelliğe ihtiyaç duyan herhangi bir sınıfa eklersiniz.

// SCSS

//create mixin
@mixin red-color{
  color: red;
}

.header{
  @include red-color;  /* add mixin */
}

.sub-header{
  @include red-color;
  font-size: 40px;
}

.header {
  color: red;
}

.sub-header {
  color: red;
  font-size: 40px;
}

Bir başka örnek ile mixin'in asıl kullanım noktasına bakalım:

// SCSS

@mixin fontSize ($params: 10px){
  font-size: $params;
}

.header{
  @include fontSize(20px);
}

.sub-header{
  @include fontSize(20px);
}

// Compiled CSS
.header {
  font-size: 20px;
}

.sub-header {
  font-size: 20px;
}

Import

SCSS, diğer SCSS stil sayfasını @import kullanarak bir SCSS dosyasına aktarmanıza izin verir.

    @import "button.scss" or @import "button"

Matematik İşlemleri

Toplama (+), Çıkarma (-), Bölme (/), Çarpma (*). Ayrıca ==, !=, <, >, >=, <= ve mantık operatörleri olan and, or, not desteklenir.

// SCSS
@mixin top-margin ($margin){
  margin-top: 30px + $margin;
}

.container{
  width: 800px - 80px;
  @include top-margin(10px);
}

//Compiled CSS

.container {
  width: 720px;
  margin-top: 40px;
}

Renk Fonksiyonu

SCSS, renkleri değiştirmek için kullanılabilecek bazı fonksiyonlar sunar. Bunlardan bazıları:

• mix($colorX, $colorY, weight) : 

mix(blue, grey, 30%) /*results 30% blue and 70% grey*/

• lighten($color, $amount):

lighten(#ff0000, 30 ) /* results #ff9999 */

• darken($color, $amount):

darken(#ff0000, 30 ) /*results #660000*/

Döngüler

Döngüler içerisinde istediğiniz sayıda class üretebilirsiniz.

For Döngüsü

@for $i from 1 through 4 {
  .item-#{$i} { left: 20px * $i; }
}

Each Döngüsü

$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

İç İçe Each Döngüsü

$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

While Döngüsü

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

Diğer Fonksiyonlar

If Else

@if $position == 'left' {
   position: absolute;
   left: 0;
}
@else {
   position: static;
}

Şimdilik Bu Kadar. Sizde SCSS'de hoşunuza giden kullanımları yorumlarda belirtin, Tartışalım 🙂