SCSS compile to CSS code example

Example 1: watch scss

sass --watch app/sass:public/stylesheets

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: what is scss

SCSS is a preprocessor which lets you use features that aren’t a part of the wider CSS standard yet, and provides better workflows for maintaining your stylesheets.

With SCSS preprocessor, you can reduce the amount of times you repeat yourself and ensure you’re writing clean, maintainable code for the future.

Scss can take css code and work. 

SCSS is fully compatible with the syntax of CSS, while still supporting the full power of Sass.

Scss is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE's old filtersyntax. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.
Dry (dont repeat yourself) code is much better then wet code (write every time).

Example 4: scss to css

/* Answer to: "scss to css" */

/*
  You can convert SCSS to CSS here:
  https://jsonformatter.org/scss-to-css

  Wanna convert it back? Google "css to scss" and see my answer there!
*/

Example 5: 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