Estoy utilizando gulp-ruby-sass
en lugar de gulp-sass
para la pre-compilación del código en scss de mi proyecto.
Resulta que aún teniendo prefijos en mi archivo .scss
y siguiendo la forma en que se declaran los mixins
como por ejemplo:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
Debería producir en el CSS algo como:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Pero solo obtengo:
.box {
border-radius: 10px;
}
Sin los prefijos.
¿A alguien más le ocurre? ¿Será que simplemente gulp-ruby-sass
no compila con los prefijos?
De ésta manera tengo las tasks de 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"}))
});
src/css/styles.css
? En el navegador únicamente te debe aparecer el estilo correcto, en la mayoría de los navegadores debería ser soloborder-radius
que ya es un estándar.src/css/style.css
gulp sass
y si me muestra bien los resultados: jsfiddle.net/learnercys/ptuo75a9 . Elcss
resultante lo puse en un comentario delscss
:)