#til

Gulp: compile sass to css
20170318

If want to write SASS but dont know how it works, this is a good guide.

SASS is basically just like an extension of CSS, its way shorter, and allow variables and simple function-like syntax to make coding CSS way easier and faster.
below shows a small difference between CSS and SASS.


//CSS
#main {
	position: relative;
	width: 100%
	max-width: 800px;
	color: #000000;
}

#main .section {
	position: relative;
	color: #000000;
}

#main .section::hover {
	background-color : #000000;
}
						

//SASS
$black : #000000

#main
	position: relative
	width: 100%
	max-width: 800px
	color: $black

	.section
		position: relative
		color: $black

		&::hover
			background-color: $black
						

lose the curly-braces and semi-colons.
however, internet browsers are not able to read SASS files, therefore you will have to compile it to CSS before using it. Here is where gulp comes in. *link: gulpjs.com

install gulp in global first. *need nodejs first installing nodejs

npm install -g gulp-cli
npm install gulp -D
						
now go to your project folder and create a gulpfile, and install gulp and gulp-sass in project level

touch gulpfile.js
npm init
npm install --save gulp gulp-sass
						
open gulp file in your code editor

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

gulp.task('default', 'build');
gulp.task('build', 'build:css');

gulp.task('build:css', function() {
	return gulp.src('assets/sass/**/*.sass')
		.pipe(sass({
			indentedSyntax: true,
			includePaths: ['assets/sass']
		}).on('error', sass.logError))
		.pipe(gulp.dest('assets/css'));
});

gulp.task('watch', ['build', 'watch:css']);

gulp.task('watch:css', function() {
	return gulp.watch('assets/sass/**/*.sass', ['build:css']);
});
						
add runner into package.json

"scripts": {
	"gulp": "gulp",
	"gulp:watch": "gulp watch",
}
						
and now, whenever you are editing your SASS files, just open terminal, cd into project, and run

npm run gulp:watch
						

gulp will automatically compile your SASS into CSS everytime you save ur CSS file. just link HTML to CSS stylesheet and you're good to go.