from Sass to PostCSS

├── .editorconfig ├── .gitignore ├── README.md ├── app ├── css │ └── style.css └── index.html ├── dest └── style.css ├── gulpfile.js ├── package.json └── src ├── helpers └── var.css └── style.css /.editorconfig: -------------------------------------------------------------------------------- 1 | ; http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.md] 14 | indent_size = 4 15 | 16 | [node_modules/**.js] 17 | codepaint = false 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | # Logs 3 | logs 4 | *.log 5 | 6 | # Dependency directory 7 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 8 | node_modules 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # From Sass to PostCss 2 | ## A gulpfile to take the plunge from Sass to PostCSS 3 | 4 | Is it possible to work without Sass and not to miss anything? 5 | Is it stable to work with postCSS in a production environment? 6 | 7 | I'm trying to prove it. 8 | -------------------------------------------------------------------------------- /app/css/style.css: -------------------------------------------------------------------------------- 1 | .color{color:#f2b806}.color-var-sass{color:#000}.nak .naknak{color:#f2b806} -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | from Sass to PostCSS 6 | 7 | 8 | 9 |

A gulpfile to take the plunge from Sass to PostCSS

10 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur illo, corrupti eum sint nisi! Inventore culpa ullam, quia deleniti ad. Quam, officia! Impedit nulla assumenda blanditiis modi molestiae libero nemo.

11 | 12 | 13 | -------------------------------------------------------------------------------- /dest/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * by Naiara Abaroa @nabaroa 3 | * version: 1.0.0; 4 | * http://naknak.me/fromSassToScss 5 | * MIT licensed 6 | * 7 | */ 8 | 9 | /*--------------------------------------------- 10 | * Import example 11 | *---------------------------------------------- */ 12 | /*--------------------------------------------- 13 | * Custom properties 14 | *---------------------------------------------- */ 15 | :root {/*--------------------------------------------- 16 | * Colors 17 | *---------------------------------------------- *//*Greyscale*/ 18 | } 19 | /*--------------------------------------------- 20 | * Sass sintax variables 21 | *---------------------------------------------- */ 22 | 23 | /*--------------------------------------------- 24 | * var example 25 | *---------------------------------------------- */ 26 | .color { 27 | color: #f2b806; 28 | } 29 | 30 | .color-var-sass { 31 | color: #000; 32 | } 33 | 34 | /*--------------------------------------------- 35 | * nesting example 36 | *---------------------------------------------- */ 37 | .nak .naknak { 38 | color: #f2b806; 39 | } 40 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | postcss = require('gulp-postcss'), 3 | cssnext = require('postcss-cssnext'), 4 | precss = require('precss'), 5 | notify = require('gulp-notify'), 6 | plumber = require('gulp-plumber'), 7 | nano = require('gulp-cssnano'), 8 | browserSync = require('browser-sync'), 9 | runSequence = require('run-sequence');; 10 | 11 | gulp.task('css', function() { 12 | var processors = [ 13 | cssnext, 14 | precss 15 | ]; 16 | var configNano = { 17 | autoprefixer: { browsers: 'last 2 versions' }, 18 | discardComments: { removeAll: true }, 19 | safe: true 20 | }; 21 | return gulp.src('./src/*.css') 22 | .pipe(postcss(processors)) 23 | .pipe(gulp.dest('./dest')) 24 | .pipe(plumber()) 25 | .pipe(nano(configNano)) 26 | .pipe(gulp.dest('./app/css')) 27 | .pipe( browserSync.stream() ) 28 | .pipe(notify({ message: 'Your CSS is ready ;)' })); 29 | }); 30 | 31 | // Static server 32 | gulp.task('browser-sync', function() { 33 | browserSync({ 34 | server: { 35 | baseDir: './app/' 36 | } 37 | }); 38 | }); 39 | 40 | // Watch 41 | gulp.task('watch', function() { 42 | // Watch .css files 43 | gulp.watch('src/**/*.css', ['css']); 44 | 45 | }); 46 | 47 | // Default 48 | gulp.task('default', function() { 49 | runSequence(['css', 'browser-sync', 'watch']); 50 | }); 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fromsasstopostcss", 3 | "version": "1.0.1", 4 | "description": "A gulpfile to take the plunge from Sass to PostCSS", 5 | "homepage": "", 6 | "author": { 7 | "name": "Naiara Abaroa", 8 | "email": "naiaraabaroa@gmail.com", 9 | "web": "http://naknak.me" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/nabaroa/fromSassToPostCSS" 14 | }, 15 | "devDependencies": { 16 | "browser-sync": "", 17 | "cssnano": "^3.5.2", 18 | "gulp": "^3.9.0", 19 | "gulp-cssnano": "^2.1.1", 20 | "gulp-notify": "^2.2.0", 21 | "gulp-plumber": "^1.1.0", 22 | "gulp-postcss": "6.1.0", 23 | "postcss-cssnext": "^2.4.0", 24 | "precss": "^1.4.0", 25 | "run-sequence": "^1.1.5" 26 | }, 27 | "license": "MIT" 28 | } 29 | -------------------------------------------------------------------------------- /src/helpers/var.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------- 2 | * Custom properties 3 | *---------------------------------------------- */ 4 | :root { 5 | --color: #f2b806; 6 | --basefont: lato, sans-serif; 7 | --bold: lato-bold, sans-serif; 8 | --light: lato-light, sans-serif; 9 | /*--------------------------------------------- 10 | * Colors 11 | *---------------------------------------------- */ 12 | /*Greyscale*/ 13 | --black: black; 14 | --opaque: #111111; 15 | --darker: #222222; 16 | --dark: #313131; 17 | --neutraler: #444444; 18 | --neutral: #666666; 19 | --pale: #999999; 20 | --bare: #cccccc; 21 | --whiter: #f3f3f3; 22 | } 23 | 24 | /*--------------------------------------------- 25 | * Sass sintax variables 26 | *---------------------------------------------- */ 27 | $color: #000; 28 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * by Naiara Abaroa @nabaroa 3 | * version: 1.0.0; 4 | * http://naknak.me/fromSassToScss 5 | * MIT licensed 6 | * 7 | */ 8 | 9 | /*--------------------------------------------- 10 | * Import example 11 | *---------------------------------------------- */ 12 | @import "helpers/var.css"; 13 | 14 | /*--------------------------------------------- 15 | * var example 16 | *---------------------------------------------- */ 17 | .color { 18 | color: var(--color); 19 | } 20 | 21 | .color-var-sass { 22 | color: $color; 23 | } 24 | 25 | /*--------------------------------------------- 26 | * nesting example 27 | *---------------------------------------------- */ 28 | .nak { 29 | .naknak { 30 | color: var(--color); 31 | } 32 | } 33 | --------------------------------------------------------------------------------