在函数中使用 sass 函数结果

Question

我有一些断点，以及用于处理它们的 mixin：

$breakpoints: (
    'xs': (max-width: 768px),
    'sm': (min-width: 768px),
    'md': (min-width: 992px),
    'lg': (mix-width: 1200px),
) !default;

@mixin screen($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media #{inspect(map-get($breakpoints, $breakpoint))} {
           @content;
         }
     } @else {
        @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
    }
}

现在我喜欢的是像素值将通过 em() 函数。

该函数如下所示：

@function em($pixels, $context: $font-initial-size) {
   @return #{$pixels/$context}em;
}

现在我希望它看起来像这样：

 $breakpoints: (
    'xs': (max-width: em(768px)),
    'sm': (min-width: em(768px)),
    'md': (min-width: em(992px)),
    'lg': (mix-width: em(1200px)),
) !default;

但是 CSS 输出是这样的：

@media (min-width: em(768px)) {

...应该是：

@media (min-width: 48em) {

那么如何在 sass 函数中 return sass 函数的结果？

我尝试将 #{} 添加到 $breakpoint... 但没有成功。

Answer 1

嗯，那是行不通的，因为在 sass 文件中使用它之前，您需要先定义函数。将 em 函数移动到文件顶部以修复问题：

$font-initial-size: 16px;

@function em($pixels, $context: $font-initial-size) {
  @return #{$pixels / $context}em;
}

$breakpoints: (
    "xs": (max-width: em(768px)),
    "sm": (min-width: em(768px)),
    "md": (min-width: em(992px)),
    "lg": (max-width: em(1200px))
) !default;

@mixin screen($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

 @include screen('sm') {
    color: blue;
}

在函数中使用 sass 函数结果

Use sass function result in function

css

sass

scss-mixins