import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={code:`code`,h1:`h1`,h2:`h2`,h4:`h4`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Custom Components/Scss/Migrating from LESS`}),`
`,(0,c.jsx)(t.h1,{id:`migrating-from-less`,children:`Migrating from LESS`}),`
`,(0,c.jsx)(t.h2,{id:`imports`,children:`Imports`}),`
`,(0,c.jsxs)(t.p,{children:[`Update imports to use `,(0,c.jsx)(t.code,{children:`@use`}),` at-rule and remove .less extension:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`- @import '~@preply/ds-web-core/dist/generated/tokens.less';
+ @use '@preply/ds-web-core/dist/generated/tokens' as *;
`})}),`
`,(0,c.jsx)(t.h2,{id:`tokens`,children:`Tokens`}),`
`,(0,c.jsxs)(t.p,{children:[`Update token variables to use `,(0,c.jsx)(t.code,{children:`$`}),` prefix:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`.MyComponent {
    - color: @color-text-primary;
    + color: $color-text-primary;
}
`})}),`
`,(0,c.jsx)(t.h2,{id:`mixins`,children:`Mixins`}),`
`,(0,c.jsxs)(t.p,{children:[`Update mixins to use `,(0,c.jsx)(t.code,{children:`@include`}),` at-rule:`]}),`
`,(0,c.jsx)(t.h4,{id:`breakpoints`,children:`Breakpoints`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`.MyComponent {
    - @media @medium-l {
    + @include medium-l {
          display: flex;
    }
}
`})}),`
`,(0,c.jsx)(t.h4,{id:`hover`,children:`Hover`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`.MyComponent {
    - transition: opacity @motion-components-interaction;
    - .onHover({
    -     opacity: 1;
    - });
    + transition: opacity $motion-components-interaction;
    + @include onHover {
    +     opacity: 1;
    + }
}
`})})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};