mercredi 26 février 2020

SCSS if..statement conversion in LESS

I'm not very familiar with LESS and trying to rework a SCSS mixin into something more LESS-like for a team who predominantly work with LESS, as they don't want to re-work their project to SCSS/SASS.

The SCSS mixin is very simply, need to map two arrays and using the outcome, output either @content() or write a simple media query statement with the @content() in between:

$breakpoints: (
    xs: 'screen and (max-width: 599px)',
    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
    lt-sm: 'screen and (max-width: 599px)',
    lt-md: 'screen and (max-width: 959px)',
    lt-lg: 'screen and (max-width: 1279px)',
    lt-xl: 'screen and (max-width: 1919px)',
    gt-xs: 'screen and (min-width: 600px)',
    gt-sm: 'screen and (min-width: 960px)',
    gt-md: 'screen and (min-width: 1280px)',
    gt-lg: 'screen and (min-width: 1920px)'
) !default;

$helper-breakpoints: (
    xs: null,
    sm: 'gt-xs',
    md: 'gt-sm',
    lg: 'gt-md',
    xl: 'gt-lg'
);

@mixin media-breakpoint($breakpointName) {

    $mediaQuery: map-get($breakpoints, $breakpointName);

    @if ($mediaQuery == null) {
        @content
    } @else {
        @media #{$mediaQuery} {
            @content
        }
    }
}

And my attempt in LESS, take into account, that I've read that LESS 1.7 allows you to do .if() which I can't get to work.

@breakpoints: {
    xs: 'screen and (max-width: 599px)';
    sm: 'screen and (min-width: 600px) and (max-width: 959px)';
    md: 'screen and (min-width: 960px) and (max-width: 1279px)';
    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)';
    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)';
    lt-sm: 'screen and (max-width: 599px)';
    lt-md: 'screen and (max-width: 959px)';
    lt-lg: 'screen and (max-width: 1279px)';
    lt-xl: 'screen and (max-width: 1919px)';
    gt-xs: 'screen and (min-width: 600px)';
    gt-sm: 'screen and (min-width: 960px)';
    gt-md: 'screen and (min-width: 1280px)';
    gt-lg: 'screen and (min-width: 1920px)'
};

@helper-breakpoints: {
    xs: null;
    sm: 'gt-xs';
    md: 'gt-sm';
    lg: 'gt-md';
    xl: 'gt-lg'
};

.media-breakpoint(@breakpointName) {

    @mediaQuery: map-get(@breakpoints, @helper-breakpoints);

    // .if(@mediaQuery eq null, {
    //     .-then() {
    //         @content();
    //     }
    //     .-else() {
    //         @media @mediaQuery {
    //             @content();
    //         }
    //     }
    // });
}

How would I rewrite that IF() in SASS in LESS correctly?

Aucun commentaire:

Enregistrer un commentaire