Skip to content

Instantly share code, notes, and snippets.

@jdsteinbach
Last active May 20, 2019 13:52
Show Gist options
  • Save jdsteinbach/40494937cf6000fe0c9f to your computer and use it in GitHub Desktop.
Save jdsteinbach/40494937cf6000fe0c9f to your computer and use it in GitHub Desktop.
Sass+PostCSS
node_modules
(function() {
'use strict';
/* Required packages */
var gulp = require('gulp');
var glob = require('glob');
var util = require('gulp-util');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var sorter = require('postcss-sorting');
var cssnano = require('cssnano');
var is_production = !(util.env.dev);
/* Gulp tasks */
gulp.task('sass', function() {
gulp.src('styles.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('.'));
});
gulp.task('postcss', function() {
console.log("PostCSS ran");
var postcss_tools = [
autoprefixer({
browsers: ['last 3 versions'],
cascade: false
}),
sorter({
'sort-order': 'csscomb'
})
];
if ( is_production ) postcss_tools.push(cssnano());
gulp.src('styles.css')
.pipe(postcss(postcss_tools))
.pipe(gulp.dest('.'));
});
gulp.task('watch', ['sass', 'postcss'], function() {
gulp.watch('**/*.scss', ['sass']);
gulp.watch('**/*.css', ['postcss']);
});
}());
{
"name": "sass-postcss",
"version": "1.0.0",
"description": "Sample gulp workflow with Sass & PostCSS",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"CSS",
"Sass",
"PostCSS"
],
"author": "James Steinbach",
"license": "ISC",
"dependencies": {
"autoprefixer": "^6.0.2",
"cssnano": "^3.7.3",
"glob": "^5.0.14",
"gulp": "^3.9.0",
"gulp-postcss": "^6.0.0",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.5.2",
"gulp-util": "^3.0.4",
"postcss-sorting": "^1.6.1"
}
}
#test{font-size:1.65rem;position:absolute;top:50px;display:-webkit-flex;display:-ms-flexbox;display:flex;width:48rem;-webkit-transform:translateX(56%);-ms-transform:translateX(56%);transform:translateX(56%);border:2px solid cornflower}
$blue: cornflower;
#test {
display: flex;
top: 50px;
font-size: 1.65rem;
width: 48rem;
position: absolute;
border: 2px solid $blue;
transform: translateX(56%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment