SASS

npmjs · github

SASS kodlarını CSS’e çevirir.

/* Kaydetmeden Önce */
$backgroundColor: #f5f5f5;
$width: 250px;
.square {
    width: $width;
    height: 250px;

    .color {
        background-color: $backgroundColor;
    }
}

/* Kaydettikten Sonra */
.square {
    width: 250px;
    height: 250px;
}

.square .color {
    background-color: #f5f5f5;
}

Kurulum

Aşağıdaki komut ile kurulum işlemini gerçekleştirebilirsiniz.

npm install gulp-sass --save-dev

Kullanımı

var gulp            = require("gulp"),
    sass            = require("gulp-sass"),

gulp.task("css", function() {
    return gulp.src("./src/*.sass")
        .pipe(sass())
        .pipe(gulp.dest("./dest"))
});

Yukarıdaki kod, tüm sass kodlarını alıp normal css kodu haline getirir.

sass({outputStyle: "compressed"}) şeklinde kullanırsanız, dönüştürülen kodu minify eder (sıkıştırır).

Sıradaki Eklenti: Sourcemaps