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

<Meta title="Guides/Custom Components/Scss/Migrating from LESS" />

# Migrating from LESS

## Imports

Update imports to use `@use` at-rule and remove .less extension:

```css
- @import '~@preply/ds-web-core/dist/generated/tokens.less';
+ @use '@preply/ds-web-core/dist/generated/tokens' as *;
```

## Tokens

Update token variables to use `$` prefix:

```css
.MyComponent {
    - color: @color-text-primary;
    + color: $color-text-primary;
}
```

## Mixins

Update mixins to use `@include` at-rule:

#### Breakpoints

```css
.MyComponent {
    - @media @medium-l {
    + @include medium-l {
          display: flex;
    }
}
```

#### Hover

```css
.MyComponent {
    - transition: opacity @motion-components-interaction;
    - .onHover({
    -     opacity: 1;
    - });
    + transition: opacity $motion-components-interaction;
    + @include onHover {
    +     opacity: 1;
    + }
}
```
