Question

我正在寻找一种在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)";

有什么办法可以自动化吗？

Answer 1

您可以编写一个包含两个参数的mixin：sreen大小和规则集。
该混合器尝试通过each function查找@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 demo。

更新。

如果要为@media使用最小值和最大值，只需手动编写必要的mixins。 简单易维护。较少的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。

在Less中通过Loop生成速记媒体查询

1 个答案: