Sass Watch, Degişkenler Nesting, Import, Mixin, Include ve Operatorler

Sass Watch, Degişkenler Nesting, Import, Mixin, Include ve Operatorler¶

Merhaba arkadaşlar sass listemde Sass yerine css yapısına daha çok benzediği ve kolay öğrenilmesi açısından daha hızlı olacağını düşündüğüm Scss yapısını ele alarak devam edeceğim, belki ilerleyen zamanlarda zaman bulursam syntax olarak bu içeriklere Sass syntax’ınıda dahil ederim, zaten Syntax hariç geri kalan herşey aynı.

Sass Watch¶

sass ile yazdığımız kodlar biz yazarken hemen css’e dönüşsün ve local de çalışırken sonunuc direk web projenizde görmek istiyorsanız bunu watch ile yapabiliyoruz

sass --watch input.scss output.css

burda input.scss ile açmış olduğumuz sass dosyasındaki kodlar biz her ctrl+s yaptığımızda hemen css kodlarına dönüştürür ve output.css dosyasına kayıt eder, watch olayını klasör yolu içinde yapabilirsiniz mesela iki tane klasörünüz olduğunu düşünün biri sass diyeri styles klasörü styles dosyanızda css kodlarınız \( dosyalarınız \) olacak bunu için

sass --watch sass:styles

bu watch’da siz sass klasörünüzde herhangi bir .sass dosya uzantısı ile dosya açıp sass kodlarınızı yazdıgınızda aynı isimide fakat .css uzantılı dosyalar styles klasörünüzde oluşmaya başlar

her ctrl+s yaptığınızda değişimler kayıt edelir.

Sass Değişkenler¶

Değişkenler, stil sayfası boyunca yeniden kullanmak istediğiniz bilgileri depolamanın bir yoludur. Yeniden kullanmak isteyeceğinizi düşündüğünüz herhangi bir CSS değerini saklayabilirsiniz. Sass bir şeyi değişken olarak atamak için $ sembolünü kullanır değişkenleri kullanmak tekrar eden kodları minumun indirmemize yardımcı olur bu yüzden değişken kullanmak önemlidir.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Burdaki değişkenlerimiz iki tane olup

$font-stack, $primary-color bunlardır, tanımladığımız değişkenleri kullanmak sitediğimizde ise yine tanımladığımız gibi $ ön eki ile birlikte değişken ismimizi yazmamız geriyor yani $primary-color böyle

bu kodlar sass’da böyle görünürken css olarak değişkenler olmadan direk değişkenin değeri olarak yazılır yani css çıktımız şöyle olacaktır.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting¶

Html kodlarımızda belirli bir hiyerarşi olabiliryor şunun gibi mesela footer>div>ul>li>a>span gibi bir şekilde html kodlarımız olabiliyor sass ile yine bu hiyerarşi gibi kod yazabiliyoruz şöyleki

footer {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
    }
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
  span {
    display: flex;
  }
}

css çıktısı olarak

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer ul li {
  display: inline-block;
}

footer a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

footer span {
  display: flex;
}

şeklinde olur

İmport İşlevi¶

sass kodlarınızı modüler olarak yazabilirsiniz örneğin header.scss kodlarınız ayrı bir dosyada, body.scss kodlarınız ayrı bir dosyada hover.scss kodlarınız ayrı bir dosyada olabilir ve bu dosyalarınızı python dilinde olduğu gibi projelerinize dahil edebilirsiniz @import ön eki ile sass ile bir kere bir çıta \(fremework\) oluşturur daha sonra isteğinize göre yaptıklarınızı projenize dahil edebilirsiniz veya github dan açık kaynak olarak yapılan sass projelerini kendi projenize import ile dahil edebilirsiniz.

örneğin ;

// _reset.scss

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

bu _reset.scss dosyamız

// base.scss

@import 'reset';

// veya

@import '_reset.scss'; // şeklindede import edebilirdik

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

@import ön eki ile aynı dizinde bulunan reset.scss dosyasını projemize dahil ettik

watch komutu bunu css dosyasına dönüştürdüğünde @import reset; yazan satırda reset dosyasındaki kodlarımız daha sonra ise onun alt satırındaki kodlar bulunur yani aynen şöyle

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins¶

fonksiyonların bir güzelliği vardır oda bir fonksiyon yazarsın sonra geri kalan kodları o yazar :D , yani şöyle kendisini sürekli tekrar eden bir olay vardır bu tekrar kodlarda ufak tefek şeyler değişse bile genel hat hep aynıdır işte o zaman bunları tekrarlamak yerine bir fonksiyon ve o değişen yerler için öğe sayısı boyunca parametreler ve işte bitti örnek verelim, mesela css ile bir border-radius kodu yazıyorsunuz ama hem frefoxda hem safaride çalışsın istiyorsunuz o zaman öyle bir kod yazmanız gerekiyor.

.border {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}

şimdi buna bakarsak -webkit-border-radius: -moz-border-radius: -ms-border-radius: border-radius: bu kısımlar değişmiyor değişen yerler aldıkları değerler birden fazla border radius kullanacaksam sürekli bunları değerleri farklı olacaksa bile tekrar tekrar yazmak yerine şyle birşey yapabilirim

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

.box { @include border-radius(10px); }

burda @mixin ön eki ile tanımlamıs oldugum border-radius isimki mixin’im $radius diye bir değişken alıyor unutmayın değişkenler $ ön eki ile tanımlanıyordu.daha sonra da yazılan bu fonksiyonu kullanmak için @include ön eki + kullanmak istediğin fonksiyon ismi ve () bunun içine fonksiyonda alınan parametre bilgisi

yani şöyle yaparsınız

.box {
  @include border-radius(1px);
}

.box {
  @include border-radius(2px);
}

.box {
  @include border-radius(3px);
}

.box {
  @include border-radius(10px);
}

gibi kullanabilirsiniz hatta daha da abartalım burda aslında sabit olan 3 nesne var onlarda -webkit,-moz ve -ms ön ekleridir ben eğer her yazdığım kod bütün tarayıcılara uyumlu olsun ve tekrar dan kurtulayım isterseniz şöyle yazmanız gerek.

@mixin prefixed($property, $value) {
    -webkit-#{$property}: #{$value};
    -moz-#{$property}: #{$value};
    -ms-#{$property}: #{$value};
    -o-#{$property}: #{$value};
    #{$property}: #{$value};
}

şimdi bunu şu şekilde kullanabilirim

@include prefixed(border-radius, 4px)

@include prefixed(border, 4px)

@include prefixed(border, 4px)

@include prefixed(border-color, red);

bakın şuan bir mixin ile her tarayıcıya uygun kodlar yazdık çok basit , bu arada \(property değişkeninden alınan css kodlarına erişmek için \#{\)property} böyle yapılmalı normal değişken değil bunlar direk $property şeklinde erişemezsiniz değişkene css kodları atadığımız için.

çıktı olarak normal css kodları verir ler örneğin şöyle

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Operatörler¶

şöyle işlemler yapabiliriz mesela

width: 300px / 960px * 100%;
width: 600px / 960px * 100%;

kullanacağımız operatörler

/,*,-,+,% dir

sass dersleri bu kadar arkadaşlar yeni şeyler öğrenirsem eklerim herkese iyi çalışmalar dilerim kolay gelsin görüşmek üzere.