• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Craig Simpson

  • Home
  • About
  • Plugins

18th May 2018 — 0

Gulp WP Toolkit SCSS Configuration and Options

Documentation on the configuration and options for SCSS files within Gulp WP Toolkit.

My Gulp WP Toolkit package assumes you’re using Sass to build your theme stylesheet files. There are various configuration options available:

  • Adding configuration
  • Base font size for REM calculations
  • Replace pixel values with REMs entirely
  • Converting media queries to REM values
  • Setting multiple SCSS files and output CSS files
  • SCSS output style
  • Sourcemap creation

Adding configuration

Configuration specific to your theme CSS files should be placed into toolkit.extendConfig() within a css key:

toolkit.extendConfig({
/* ... Shortening for brevity, other config would likely be here. */
css: {
/* Additional configuration */
},
});
view raw Gulpfile.js hosted with ❤ by GitHub

Base font size for REM calculations

The default value is set at 16, but you can update this to reflect a different base font size. An integer value should be given, for example:

toolkit.extendConfig({
/* ... Shortening for brevity, other config would likely be here. */
css: {
basefontsize: 10
},
});
view raw Gulpfile.js hosted with ❤ by GitHub

Replace pixel values with REMs entirely

By default, Gulp WP Toolkit will add a REM size immediately after a pixel size. If you’d like to replace size declarations altogether, you can change the config to:

toolkit.extendConfig({
/* ... Shortening for brevity, other config would likely be here. */
css: {
remreplace: true
}
});
view raw Gulpfile.js hosted with ❤ by GitHub

Converting media queries to REM values

By default, Gulp WP Toolkit will convert media query values to rems, so your media query may read @media only screen and (min-width: 40rem). You can switch this off, and your media queries will remain fixed at pixel values, using:

toolkit.extendConfig({
/* ... Shortening for brevity, other config would likely be here. */
css: {
remmediaquery: false /* Turn off auto conversion of media queries to REMs. */
},
});
view raw Gulpfile.js hosted with ❤ by GitHub

Setting multiple SCSS files and output CSS files

In a default installation config exists only for a main style.scss file. If you want to add new stylesheets, for example something WooCommerce or EDD specific, you can do so with the following example:

toolkit.extendConfig({
/* ... Shortening for brevity, other config would likely be here. */
css: {
scss: {
'woocommerce': { /* Output filename */
src: 'develop/scss/woocommerce.scss', /* Input file */
dest: 'css/' /* Output path. */
},
'edd': { /* Output filename */
src: 'develop/scss/edd.scss', /* Input file */
dest: 'css/' /* Output path. */
}
}
}
});
view raw Gulpfile.js hosted with ❤ by GitHub

SCSS output style

The default output style is compressed, and I would advise that this is retained for all production files. However, you can set the output style to any of the other options within the Gulp WP Toolkit configuration. Using the previous example files, we can set different output styles as follows:

toolkit.extendConfig({
/* ... Shortening for brevity, other config would likely be here. */
css: {
scss: {
'style': { /* Override default options by adding 'style' to our config. */
outputStyle: 'expanded'
},
'woocommerce': { /* Output filename */
src: 'develop/scss/woocommerce.scss', /* Input file */
dest: 'css/', /* Output path. */
outputStyle: 'expanded' /* Set expanded output style. */
},
'edd': { /* Output filename */
src: 'develop/scss/edd.scss', /* Input file */
dest: 'css/', /* Output path. */
outputStyle: 'compressed' /* Set expanded output style. */
}
}
}
});
view raw Gulpfile.js hosted with ❤ by GitHub

Sourcemap creation

A recent addition to the toolkit, you can now easily switch on and off the creation of source maps. Building on our previous example, we could set output a source map for the WooCommerce stylesheet, but none of the others with the following code:

toolkit.extendConfig({
/* ... Shortening for brevity, other config would likely be here. */
css: {
scss: {
'style': { /* Override default options by adding 'style' to our config. */
outputStyle: 'expanded',
sourceMap: false
},
'woocommerce': { /* Output filename */
src: 'develop/scss/woocommerce.scss', /* Input file */
dest: 'css/', /* Output path. */
outputStyle: 'expanded', /* Set expanded output style. */
sourceMap: true
},
'edd': { /* Output filename */
src: 'develop/scss/edd.scss', /* Input file */
dest: 'css/', /* Output path. */
outputStyle: 'compressed', /* Set expanded output style. */
sourceMap: false
}
}
}
});
view raw Gulpfile.js hosted with ❤ by GitHub

Workflow

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Get more by email

Subscribe to my email newsletter for a monthly digest of my blog posts, as well as exclusive developer content and curated links to useful resources.

Copyright © 2015–2022 Craig Simpson • Built on the Genesis Framework

Twitter GitHub