I am using gulp-ruby-sass
instead of gulp-sass
for the pre-compilation of the scss code of my project.
It turns out that I still have prefixes in my file .scss
and following the way in which the mixins are declared
such as:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
You should produce something like:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
But I only get:
.box {
border-radius: 10px;
}
Without the prefixes.
Does anyone else happen to him? Could it be that simply gulp-ruby-sass
does not compile with the prefixes?
This way I have the tasks of gulp:
var gulp = require("gulp");
// Requires the gulp-sass plugin
var sass = require("gulp-ruby-sass");
// Requires browser-sync package for automatic browser refresh
var browserSync = require("browser-sync").create();
// Static Server + watching scss/html files
gulp.task("serve", ["sass"], function(){
browserSync.init({
server: "./src"
});
/**
* Listens changes for all .scss files
*/
gulp.watch("src/scss/*.scss", ["sass"]);
/**
* Listens changes for all .html files
*/
gulp.watch("src/*.html").on("change", browserSync.reload);
gulp.watch("src/en/*.html").on("change", browserSync.reload);
});
/**
* Compile with gulp-ruby-sass
*/
gulp.task("sass", function () {
return sass("src/scss/style.scss")
.on("error", sass.logError)
// Writes converted css to dest url
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream({match: "src/*.css"}))
});