3 – CSS, PostCSS and Sass

PostCSS

By default WordPressify supports PostCSS, a similar preprocessor to Sass, Less and others but with more functionality. On top of that PostCSS is 3x faster than Sass and 4x faster than Less. Features come in the shape of PostCSS plugins. Think of these like using Lego, where each piece is a different feature that can transform your CSS in some way. PostCSS lets you stick these pieces together so that you can build up your own feature set, adding and removing plugins as and when you need them. CSSNext is installed by default. Read more about PostCSS here.

PostCSS Plugins

WordPressify has two different sets of PostCSS plugins – one for the development environment (pluginsDev) and one for the production task (pluginsProd).

//--------------------------------------------------------------------------------------------------
/* -------------------------------------------------------------------------------------------------
PostCSS Plugins
 ------------------------------------------------------------------------------------------------- */

const pluginsDev = [
    partialimport,
    cssnext({
        features: {
            colorHexAlpha: false
        }
    })
];
const pluginsProd = [
    partialimport,
    cssnext({
        features: {
            colorHexAlpha: false
        }
    })
];
//--------------------------------------------------------------------------------------------------

Writing CSS

The starting point for CSS is the file:

src/styles/styles.css

The template definitions are located here too. It is also where all other imports are included in the stylesheets.

/*
Theme Name: WordPressify
Theme URI: https://www.wordpressify.co
Author: Luan Gjokaj
Author URI: https://www.riangle.com
Description: WordPressify official theme.
Version: 1.0
Tags: responsive, clean, minimal, modern, documentation
*/

Sass

WordPressify is super flexible. You can install Sass and use it as the main CSS preprocessor:

npm install gulp-sass --save-dev

Include Sass in gulpfile.js:

const sass = require('gulp-sass');

Change the gulp tasks style-dev to:

gulp.task('style-dev', () => {
    return gulp
    .src("src/style/style.scss")
        .pipe(sourcemaps.init())
        .pipe(sass().on("error", sass.logError))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("build/wordpress/wp-content/themes/" + themeName))
        .pipe(browserSync.stream({ match: "**/*.css" }));
});

Change the gulp tasks style-prod to:

gulp.task('style-prod', () => {
    return gulp.src('src/style/style.scss')
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest('dist/themes/' + themeName))
});

Also the watch task has to be changed in order to watch for .scss filetypes:

gulp.task('watch', () => {
    gulp.watch(['src/style/**/*.scss'], ['style-dev']);
    gulp.watch(['src/js/**'], ['reload-js']);
    gulp.watch(['src/fonts/**'], ['reload-fonts']);
    gulp.watch(['src/theme/**'], ['reload-theme']);
});

CSS with hot reload on WordPress

Continue to:
4 – Fonts and Images