| 1 |
# Base Styles |
| 2 |
|
| 3 |
Base SCSS utilities and variables for WordPress. |
| 4 |
|
| 5 |
## Installation |
| 6 |
|
| 7 |
Install the module |
| 8 |
|
| 9 |
```bash |
| 10 |
npm install @wordpress/base-styles --save-dev |
| 11 |
``` |
| 12 |
|
| 13 |
## Use |
| 14 |
|
| 15 |
### SCSS utilities and variables |
| 16 |
|
| 17 |
In your application's SCSS file, include styles like so: |
| 18 |
|
| 19 |
```scss |
| 20 |
@import "node_modules/@wordpress/base-styles/colors"; |
| 21 |
@import "node_modules/@wordpress/base-styles/variables"; |
| 22 |
@import "node_modules/@wordpress/base-styles/mixins"; |
| 23 |
@import "node_modules/@wordpress/base-styles/breakpoints"; |
| 24 |
@import "node_modules/@wordpress/base-styles/animations"; |
| 25 |
@import "node_modules/@wordpress/base-styles/z-index"; |
| 26 |
``` |
| 27 |
|
| 28 |
If you use [](https://webpack.js.org/Webpack](https://webpack.js.org/](https://webpack.js.org/) for your SCSS pipeline, you can use `~` to resolve to `node_modules`: |
| 29 |
|
| 30 |
```scss |
| 31 |
@import "~@wordpress/base-styles/colors"; |
| 32 |
``` |
| 33 |
|
| 34 |
To make that work with [](https://www.npmjs.com/package/sass`sass`](https://www.npmjs.com/package/sass](https://www.npmjs.com/package/sass) or [](https://www.npmjs.com/package/node-sass`node-sass`](https://www.npmjs.com/package/node-sass](https://www.npmjs.com/package/node-sass) NPM modules without Webpack, you'd have to use [](https://sass-lang.com/documentation/js-api#includepathsincludePaths option](https://sass-lang.com/documentation/js-api#includepaths](https://sass-lang.com/documentation/js-api#includepaths): |
| 35 |
|
| 36 |
```json |
| 37 |
{ |
| 38 |
"includePaths": ["node_modules"] |
| 39 |
} |
| 40 |
``` |
| 41 |
|
| 42 |
<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p> |
| 43 |
|
