compile sass to css code example

Example 1: sass compile minified

sass --watch a.scss:a.css --style compressed

Example 2: how to compile scss to css

// Install node-sass
npm i node-sass

// In package.json:  
"scripts": {
	  ...
      "scss": "node-sass — watch scss -o css"
}

// Run the compilation
npm run scss

Example 3: sass to scss

# You can do it with SASS itself 
# Nevermind these malware infested sites below
sass-convert style.sass style.scss

Example 4: compile scss

//in gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

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


//or
gulp.task('stylesDone', function(done) { //use the callback
   gulp
    .src("sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"));
  done(); 
});


gulp.task('stylesPromise', function() { 
  return new Promise(function(resolve, reject) {
   gulp
    .src("sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"));
   resolve();
  });
});

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

//or

gulp.task('styleEmitter', function() {
    var e = new EventEmitter();
    e.on('runstyle', 
    function(msg) { 
        gulp.task("stylesReturn", function () {
            return gulp
            .src("sass/**/*.scss")
            .pipe(sass().on("error", sass.logError))
            .pipe(gulp.dest("./css/"));
        });
        console.log(msg);
    setTimeout(() => { e.emit('runstyle', 'My message'); 
    e.emit('finish'); });
    return e;
  });
  
//or you could spin up a kubernetes image of a vax pdp11 on elastic beanstalk

  gulp.task('default',function() {
  gulp.watch('sass/**/*.scss', gulp.series('stylesKubernetes'));
});
  
gulp --tasks
gulp styles
gulp watch

//specify your s(ca)ss directory and css directory

//gulp.task('styles', function() {
//    gulp.src('sass/**/*.scss')
//        .pipe(sass().on('error', sass.logError))
//        .pipe(gulp.dest('./css/'))
//});
//no that's a lie. You now have to return something

//gulp.task('default',function() {
//    gulp.watch('sass/**/*.scss',['styles']);
//});
//Watch task ... no! thats a lie too. That's SOOooo version 3.x

//** DETAILS

Dir Structure...
--sass
   - style.scss
-- css
package.json
Gulpfile.js