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 */ | |
| }, | |
| }); |
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 | |
| }, | |
| }); |
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 | |
| } | |
| }); |
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. */ | |
| }, | |
| }); |
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. */ | |
| } | |
| } | |
| } | |
| }); |
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. */ | |
| } | |
| } | |
| } | |
| }); |
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 | |
| } | |
| } | |
| } | |
| }); |
Leave a Reply