Base SCSS utilities and variables for WordPress.


Install the module

npm install @wordpress/base-styles --save-dev


SCSS utilities and variables

In your application’s SCSS file, include styles like so:

@import 'node_modules/@wordpress/base-styles/colors';
@import 'node_modules/@wordpress/base-styles/variables';
@import 'node_modules/@wordpress/base-styles/mixins';
@import 'node_modules/@wordpress/base-styles/breakpoints';
@import 'node_modules/@wordpress/base-styles/animations';
@import 'node_modules/@wordpress/base-styles/z-index';
@import 'node_modules/@wordpress/base-styles/default-custom-properties';

If you use Webpack for your SCSS pipeline, you can use ~ to resolve to node_modules:

@import '~@wordpress/base-styles/colors';

To make that work with sass or node-sass NPM modules without Webpack, you’d have to use includePaths option:

    "includePaths": [ "node_modules" ]

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.