# Base Styles

Base SCSS utilities and variables for WordPress.

Note: This package requires [Dart Sass](https://www.npmjs.com/package/sass) to compile. When using this package, make sure you are using Sass version 1.23.0 or later, which is based on Dart Sass.

## Installation

Install the module

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

## Usage

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

```scss
@use '@wordpress/base-styles/colors';
@use '@wordpress/base-styles/variables';
@use '@wordpress/base-styles/mixins';
@use '@wordpress/base-styles/breakpoints';
@use '@wordpress/base-styles/animations';
@use '@wordpress/base-styles/z-index';
@use '@wordpress/base-styles/default-custom-properties';
```

Make sure to use namespaces when accessing utilities, variables, functions, etc. For example:

```scss
.selector {
	color: colors.$gray-300;

	@include mixins.break-medium() {
		font-size: variables.$font-size-large;
	}
}
```

### CSS Admin Themes

The package also includes a built version of the output generated by the `wordpress-admin-schemes()` mixin which can be used directly in your project. The CSS file is located at `node_modules/@wordpress/base-styles/build-style/admin-schemes.css`.

## 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](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) 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](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).

<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>