import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';

<Meta title="SCSS/Mixins" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# SCSS Mixins

### Prereqs

Mixins allow you to re-use styles we've already defined in your components. Read more about how they work [here](https://sass-lang.com/documentation/at-rules/mixin) or just follow the examples below.

## Available mixins

### `body-text`

Mixin our default body text styles.

```html
<div class="my-custom-text">
  <h3>Lorem Ipsum</h3>
  <p>Ig-pay atin-lay</p>
</div>

<style lang="scss">
  // Import SCSS mixins
  @import '@reuters-graphics/graphics-components/dist/scss/mixins';

  div.my-custom-text {
    // Use body-text rules for all text elements
    // inside your custom element.
    @include body-text;
  }
</style>
```

### `graphic-text`

Graphic text styles.

```html
<div class="my-chart-container">
  <h3>Things are going up</h3>
  <p>Recent data point to a clear trend.</p>
  <div id="chart"></div>
  <aside>
    <p>Source: Horoscopery</p>
  </aside>
</div>

<style lang="scss">
  @import '@reuters-graphics/graphics-components/dist/scss/mixins';

  div.my-chart-container {
    @include graphic-text;
  }
</style>
```

### `visually-hidden`

Hide text meant for screen readers.

```html
<div class="hidden">
  <p>A chart that shows many things.</p>
</div>

<style lang="scss">
  @import '@reuters-graphics/graphics-components/dist/scss/mixins';

  div.hidden {
    @include visually-hidden;
  }
</style>
```