import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Custom Components/Scss/Hover" />

# SCSS: Hover

<details style={{ marginBlock: '24px' }}>
    <summary>🚧 SCSS Support is experimental 🚧</summary>

SCSS support was introduced due to the lack of support for LESS in the Next.js app router.

Please avoid using it for other purposes, as the API may change or be removed in the future.

</details>

Import `hover.scss` from `@preply/ds-web-core` and use the `onHover` mixin to show hover only for **Desktops with mouse**:

```css
@use '@preply/ds-web-core/dist/generated/tokens' as *;
@use '@preply/ds-web-core/dist/generated/hover' as *;

.MyComponent {
    background: lightblue;
    padding: $spacing-16;

    @include onHover {
        background: lightpink;
    }
}
```
