SASS i GULP-SASS

SASS = Syntactically Awesome Style Sheets.
SASS = preprocesor CSS
Wprowadzenie do SASS'a: https://sass-lang.com/guide

UWAGA: podobno SASS uzależnia

Instalacja

1. tworzymy katalog i przechodzimy do niego
2. npm init //to założy zbiór package.json i katalog node_modules
3. npm install -g gulp //jeżeli nie mamy zainstalowanego pakietu gulp globalnie
4. npm install --save-dev gulp
5. npm install --save-dev gulp-sass

Struktura katalogu

- index.html
--sass
   - style.scss
-- css
-- node_modules
package.json
gulpfile.js

Minimalna zawartość Gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'));
});

Uruchamiamy to poleceniem: gulp styles

/**/ to polecenie dla gulpa aby przeszukiwał również podkatalogi

Zawartość Gulpfile.js obserwującego zmiany w *.scss

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'))
});

//Watch task
gulp.task('obserwuj',function() {
    gulp.watch('sass/**/*.scss',['styles']);
});

Uruchamiamy to poleceniem: gulp obserwuj