Compile sass to css
Code examples
sass to scss
# You can do it with SASS itself
# Nevermind these malware infested sites below
sass-convert style.sass style.scsshow 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
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
Similar pages
Similar pages with examples
In other languages
This page is in other languages
empty row
Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................
Балгарскі
..................................................................................................................
Íslensk
..................................................................................................................
Popular in the category
Popular pages with examples in the category
empty row