Sass(Syntactically Awesome Style Sheet), en popüler CSS ön-işlemcilerinden biridir. Kendi resmi sitesindeki tanımına göre olgun, istikrarlı ve güçlü seviyede bir CSS uzantı dilidir.
Uzantı dili cümlesinin nedeni CSS dili ile aynı olup sadece Css' i daha esnek, daha verimli ve daha düzenli yazmamıza olanak tanımasından dolayıdır. Diğer popüler olan CSS ön-işlemcileri ise; LESS, Stylus ve PostCSS' dir. Bu ön-işlemciler kısaca CSS' i bir programa dili gibi kullanmamıza olanak tanır.
Sass, 2006 yılında CSS' i Ruby diline benzer bir yapıyla geliştirme fikri ile ortaya çıkmış bir Ruby Gem' dir aslında. Şuan ise bir GitHub deposunda açık kaynak bir şekilde geliştirilmeye devam ediliyor.
Ruby diline benzer bir yapıda planlandığı için, yazım dili(syntax) normal CSS'in dışına çıkmıştır doğal olarak. Kullanım oranı arttıkça ve Front-end geliştiricilerin normal CSS' den gelen el alışkanlığı göz önünde bulundurularak, sözdizimi değişime uğramış ve SCSS haline bürünmüştür.
Sass geliştiricileri varsayılan sözdiziminin Scss olduğunu
fakat, Sass sözdizimine de destek vermeye devam edeceklerini söylüyorlar.
Kısaca, Sass ve SCSS' in sözdizimi(syntax) haricinde birbirlerinden farkı yoktur.
Konunun başındayken, yazım dili hakkında küçük bir örnek göstermek gerekirse;
.container
width: 200px
height: 200px
.row
background-color: #fff .container {
width: 200px;
height: 200px;
.row {
background-color: #fff;
}
}
CSS' i hantal bir yapıdan çıkartıp daha dinamik bir yapıya döndürür. Bize içerisinde değişken tanımlama, iç içe yazım kolaylığı(yukarıdaki örnek kod gibi), karar yapıları(if, else) ve döngüler gibi birçok imkan sunar.
Global veya Local bir kurulum gerçekleştirdikten sonra projeye oluşturulan ".sass" veya ".scss" dosyalarını derleyerek normal bir CSS dosyası oluşturur. Ve o CSS dosyasını projeye dahil ederek kullanmış oluruz.
npm install -g sass
Kurulumu gerçekleştirdikten sonra(npm ve node.js' in güncel versiyon olduğundan emin olun), bir ".scss" uzantılı dosya yaratıp komut satırına aşağıdaki kod ile derleyip, kullanıma hazır hale getirmiş oluyoruz.
sass style.scss:style.css
":" dan önceki kısım oluşturduğum dosya ismim(style.scss), ":" dan sonraki kısım ise derleme sonunda oluşturmasını istediğim kullanılmaya uygun parça
Dizin belirtebilirsiniz.
sass style.scss:app/content/style.css
Yukarıdaki bölüm birkez derler bırakır. Her değişiklik yapmak istediğinizde tekrar tekrar yazmamak için;
sass --watch style.scss:style.css
Gulp, Front-end iş akışlarını otomatikleştirmeye yarayan; kabaca tekrar eden işlemleri görev olarak tanımlayıp ardından çalıştırmak için kullanılır.
Gulp hakkında daha fazla bilgi almak için;
Sass kullanımına gelecek olursak da öncelikle bir package.json dosyası oluşturuyoruz.
npm init
Daha sonrasında da sırayla
npm install gulp
ve
npm install gulp-sass --save-dev
komutlarıyla package.json dosyamızın içerisine bağımlılıklarımızı, modüllerimizi yüklemiş oluyoruz.
Ardından bir gulpfile.js dosyası oluşturup içerisine,
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('css', function(){
return gulp.src('./src/*.scss)
.pipe(sass())
.pipe(gulp.dest('./dest'))
});yukarıdaki kodları yazıyoruz. Burada kısaca, "src" isimli dosyamızın içerisindeki tüm "scss" uzantılı dosyaları derleyip bir css dosya çıktısı vermesini istiyoruz. Gulp' ı çalıştırmak için ise, terminale "gulp" yazmak yeterli oluyor.
Ardından tabi ki oluşturulan CSS dosyamızı projeye dahil edip(normal HTML içerisine nasıl dahil ediyorsak), yolumuza devam ediyoruz.
CSS' de değişken oluşturup kullanılmasına olanak sağlar, en kullanışlı özelliklerden biridir. Başına "$" işareti koymamız yeterli oluyor.
$myColor: #424242;
$myFontSize: 18px; CSS yazmayı hızlandıran, kod kalabalığını azaltan ve bence asıl önemi büyük projelerde ortaya çıkan favori özelliğimdir.
div{
width: 40px;
height: 40px;
background-color: purple;
span{
width: 20px;
.logo{
color: #fff;
}
}
}3 adet Sass dosyamız olduğunu düşünelim. Derledikten sonra bize 3 adet CSS dosyası vermesi pek işimize yaramaz sanırım. O yüzden bu ".scss" uzantılı dosyaların birini ana dosya seçip diğerlerini bunun içerisine import etmek baya faydalı olur.
$myColor: purple;
$myFontFamily: 'Helvetica, sans-serif';
*{
margin: 0px;,
padding: 0px;
box-sizing: border-box;
} @import 'degiskenler';
@import 'reset';
h1{
font-size: $myFontFamily;
color: $myColor;
}Tam bir türkçe karşığı zannımca yok ama kullanılma amacı kısaca, sürekli yazdığımız CSS kodlarını tek bir yerde(fonksiyon gibi) toplayıp daha sonrasında çağırma işlemi yaparak ögeleri, elemanları stillendirmeye yarar.
Mesela;
@mixin myLayout(){
display: flex;
justify-content: center;
align-items: center;
}
.kapsayici{
@include myLayout();
}veya
@mixin myWidth($width){
max-width: $width;
}
div{
@include myWidth(600px);
}Bu özellik ile kodlarımıza miras alma yöntemi(extend) uygulayabiliriz.
.myLink {
padding: 5px;
text-decoration: none;
}
.btn {
@extend .myLink;
}
Basit matematik işlemlerini CSS' de yapmamıza olanak sağlayan bir özelliktir. Sass tarafında yapılan matematiksel işlem, CSS tarafında sonuçlandırılmış olarak görüntülenecektir.
.kutu {
width: 1/3 * 100%;
height: 30px * 2.5;
} .kutu {
width: 33.33333%;
height: 75px;
}Direkt örnek üzerinden göstermek gerekirse;
$value = 12;
div {
@if $value < 4 {
background-color: red;
}
@else if $value == 4 {
background-color: blue;
}
@else {
background-color: green;
}
}Bunu canlı derste örnek proje üzerinden daha net bir şekilde açıklayacağım ama yine de kısa bir tanım yapmam gerekirse; 4. örnekteki gibi yine iç içe işlemler yaparken, "&" bu işaret, "Class" lardaki "this" anahtar sözcüğü gibi davranır.
Basit bir örnek kod üzerinden göstermek gerekirse;
a {
color: red;
font-size: 10px;
&:hover {
color: blue;
}
}Normal CSS koduyla bir "hover" işlemi yapsak?
a {
color: red;
font-size: 10px;
}
a:hover {
color: blue;
}
Şimdilik bahsedeceklerim bu kadar. Umarım arasındaki farkları ve Sass' ın sağladığı kolaylıkları net bir şekilde aktarabilmişimdir. Şunu söyleyebilirim ki Sass kullanmaya başladıktan sonra normal CSS yazmak asla istemiyorsunuz ve büyük ölçekli projelerin şuan için vazgeçilmezi durumunda.