Генерация стенографических медиазапросов с помощью Loop, в Less - PullRequest
Новая
       13

Генерация стенографических медиазапросов с помощью Loop, в Less

0 голосов
/ 16 октября 2018

Я ищу способ создания предопределенных медиазапросов в Less, что-то вроде: 

@media @small {
    color: #333;
}

Я бы хотел получить значения из списка: 

@screens: {
    small: 320px;
    medium: 768px;
    large: 1024px;
};

Раньше я делал это так, но тогда мне приходилось жестко кодировать каждую точку останова вручную, а не генерировать имя и размер экрана с помощью приведенного выше списка: 

@small: ~"only screen and (min-width: 320px)";
@media: ~"only screen and (min-width: 768px)";
@large: ~"only screen and (min-width: 1024px)";

Есть ли способ автоматизировать это?

1 Ответ

0 голосов
/ 16 октября 2018

Вы можете написать миксин, который принимает два параметра: размер экрана и наборы правил.
Этот миксин пытается найти значение @screen с помощью каждой функции и, когда находит, печатает связанный медиазапрос.

@screens: {
    small:   320px;
    medium:  768px;
    large:  1024px;
};

.media(@screen, @rules) {
    each(@screens, {
        & when (@key = @screen) {
            @media (only screen) and (min-width: ~"@{value}") {
                @rules();
            }
        }
    });
}

Использование.Установите размер экрана и наборы правил. 

header {
    background-color: blue;

    .media(small, {
        background-color: red; 
    });
}

Демонстрация Codepen .

Обновление.

Если вы хотите использовать минимальные и максимальные значениядля @media просто напишите необходимые миксины вручную.Гораздо проще и просто поддерживать .Less lang не имеет достаточно функций для работы с картами и условиями.

Например: 

@phone:   600px; // imagine phone screens are 600px and lower
@tablet:  900px; // tablets are between 601px (@phone + 1px) and 900px
@laptop: 1200px; // laptops are between 901px (@tablet + 1px) and 1200px
// large sreens are wider than 1201px (@laptop + 1px)

// @media to detect only tablets:
.tablet-only(@rules) {
  @media (only screen) and (min-width: ~"@{phone} + 1px") and (max-width: ~"@{tablet}") {
    @rules();
  }
}

// @media for tablets and wider (modile-first approach):
.tablet(@rules) {
  @media (only screen) and (min-width: ~"@{phone} + 1px") {
    @rules();
  }
}

// @media for tablets and smaller (desktop-first approach):
.tablet(@rules) {
  @media (only screen) and (max-width: ~"@{tablet}") {
    @rules();
  }
}

// Usualy you don't need to have modile-first and desktop-first @medias at the same time into one project

Ознакомьтесь со статьей на zellwk.com, чтобы узнать о mobile-first appproach .

...