Skip to content

Instantly share code, notes, and snippets.

@shisama
Created October 19, 2017 16:13
Show Gist options
  • Save shisama/7c714add73a7ddaaa802a84072468a98 to your computer and use it in GitHub Desktop.
Save shisama/7c714add73a7ddaaa802a84072468a98 to your computer and use it in GitHub Desktop.
compile sasst to css with gulp and autoprefixer
const gulp = require("gulp");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const plumber = require("gulp-plumber");
const path = require("path");
gulp.task("build-css", function() {
gulp.src(path.join(__dirname, "src", "css", "*.sass"))
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({browsers: [">= 0.1%"]}))
.pipe(gulp.dest(path.join(__dirname, "public", "css")));
});
{
"name": "sass-autoprefixer-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-css": "rm -rf public && gulp build-css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-sass": "^3.1.0"
}
}
.sample {
color: #00008B;
font-size: large;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
@charset "UTF-8"
$darkblue: #00008B
.sample
color: $darkblue
font-size: large
display: flex
background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet)
user-select: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment