77 lines
1.6 KiB
Text
77 lines
1.6 KiB
Text
import { Meta } from '@storybook/addon-docs';
|
|
import { parameters } from '$docs/utils/docsPage.js';
|
|
|
|
<Meta title="SCSS/Mixins" parameters={{ ...parameters }} />
|
|
|
|
|
|
|
|
# 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>
|
|
```
|