从媒体查询功能中的地图生成SASS动态颜色

Question

我正在使用@include-media获取sass断点（https://include-media.com/）。 我想生成一个动态断点辅助文本，它可以在不同的媒体大小上更改bg / color。

注意

断点混合 - https://raw.githubusercontent.com/eduardoboucas/include-media/master/dist/_include-media.scss 我想要一个简单的解决方案结果应该从地图或列表中动态创建颜色。

SCSS

//  BREAKPOINT (Mobile first)
    $breakpoints: (        
        'sm':   540px,
        'md':   768px,
        'lg':   1025px,
        'xl':   1360px
    )!default;

    $breakpoint-colors: ( 
        red, green, yellow, blue
    )

//  Container (Mobile first)
    $container: (        
        'sm':   520px,
        'md':   740px,
        'lg':   1024px,
        'xl':   1320px,
    )!default;

//  generate
    @each $name, $value in $breakpoints{
        @include media('>=#{$name}') {
            &:after {
                content: "#{$name} >= #{$value}";
            }
        }
    }
}

预期结果

@media (min-width: 540px) {
    body:after {
        content: "Media: sm >= 540px | Container: 520px;";
        background-color: red;
    }
}

@media (min-width: 1024px) {
    body:after {
        content: "Media: sm >= 768px | Container: 740px;";
        background-color: green;
    }
}

@media (min-width: 1200px) {
    body:after {
        content: "Media: sm >= 1025px | Container: 1024px;";
        background-color: yellow;
    }
}

@media (min-width: 1600px) {
    body:after {
        content: "Media: sm >= 1360px | Container: 1320px;";
        background-color: blue;
    }
}

Answer 1

您面临的问题是基于范围的问题。您正在breakpoints标记内定义body变量，因此您无法正确覆盖正在使用的breakpoints混合中的默认sass定义。

我还将您的$breakpoint-colors转换为地图，因此您可以轻松映射相应的断点值。

尝试以下操作，将完全按照您的要求进行编译：

$breakpoints: (        
  'sm': 540px,
  'md': 768px,
  'lg': 1025px,
  'xl': 1360px
);

$breakpoint-colors: ( 
  'sm': red, 
  'md': green,
  'lg': yellow,
  'xl': blue
);

$containers: (        
  'sm': 520px,
  'md': 740px,
  'lg': 1024px,
  'xl': 1320px,
);

body {
  @each $name, $value in $breakpoints {
    $container: map_get($containers, $name);
    $background: map_get($breakpoint-colors, $name);
    @include media('>=#{$name}') {
      &:after {
        content: "Media: #{$name} >= #{$value} | Container: #{$container}";
        background: $background;
      }
    }
  }
}

这将编译为：

@media (min-width: 540px) {
  body:after {
    content: "Media: sm >= 540px | Container: 520px";
    background: red;
  }
}
@media (min-width: 768px) {
  body:after {
    content: "Media: md >= 768px | Container: 740px";
    background: green;
  }
}
@media (min-width: 1025px) {
  body:after {
    content: "Media: lg >= 1025px | Container: 1024px";
    background: yellow;
  }
}
@media (min-width: 1360px) {
  body:after {
    content: "Media: xl >= 1360px | Container: 1320px";
    background: blue;
  }
}