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