S CSS, если ... преобразование в LESS - PullRequest
Новая
       12

S CSS, если ... преобразование в LESS

0 голосов
/ 26 февраля 2020

Я не очень знаком с LESS и пытаюсь переделать микшер S CSS во что-то более похожее на LESS для команды, которая преимущественно работает с LESS, так как они не хотят переделывать свой проект в SCSS. /SASS.

Миксин S CSS очень прост, нужно отобразить два массива и, используя результат, вывести либо @content (), либо написать простую инструкцию медиа-запроса с @content () между : 

$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
        }
    }
}

И моя попытка в LESS, учитывая, что я прочитал, что LESS 1.7 позволяет вам делать .if (), что я не могу заставить работать. 

@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();
    //         }
    //     }
    // });
}

Как бы я правильно переписал IF () в SASS в LESS?

Обновление

Кажется, что .set (...) работает лучше всего для В этом случае моя проблема в том, что он не может найти @bp. Похоже, вы не можете передать переменную @ в новую функциональность карты: (. 

.media-breakpoint(@bp) {

    // .set(@bp) when (@breakpoints[@bp] = null) {
    //     font-size: 12px;
    // }

    // .set(@bp) when not (@breakpoints[@bp] = null) {
    //     font-size: 14px;
    // }
}

1 Ответ

0 голосов
/ 26 февраля 2020

Окончательное решение, выяснили: 

@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(@bp, @rules) when not (@bp = null) {
    @media @breakpoints[$@bp] {
        @rules();
    }
}

.media-breakpoint(@bp, @rules) when not (@bp = null) {
    @media @breakpoints[$@bp] {
        @rules();
    }
}

Обычно, когда переменная @bp не указана, просто визуализируем @rules () напрямую, в противном случае оборачиваем @rules () как ' content 'в рамках запроса @media.

Меньше ожидать другого мышления, но как только вы освоите его, все будет не так уж и плохо: D.

Вывод из вышеперечисленного:

1.) Использование 

.fg-light {

    .media-breakpoint(null, {
        font-size: 12px;
    });

    .media-breakpoint(lg, {
        font-size: 14px;
    });
}

2.) Выход 

.fg-light {
  font-size: 12px;
}

@media 'screen and (min-width: 1280px) and (max-width: 1919px)' {
  .fg-light {
    font-size: 14px;
  }
}
...