css 有人能告诉我这个SASS代码有什么问题吗

f0brbegy 于 2023-01-18 发布在其他

关注(0)|答案(1)|浏览(155)

当输入值“xs”时，我收到一个错误消息“（最大宽度：575.98px）不是一个有效的CSS值。”当输入任何其他值时，我会得到以下错误“This Breackpoint 'sm' is not supported yet”是否有可能将此想法应用于SASS？

$breakpoints: (
  "xs": (max-width: 575.98px),
  "sm": ((min-width: 576px) and (max-width: 767.98px)),
  "md": ((min-width: 768px) and (max-width: 991.98px)),
  "lg": ((min-width: 992px) and (max-width: 1199.98px)),
  "xl": ((min-width: 1200px) and (max-width: 1399.98px)),
  "xxl": (min-width: 1400px),
);

  @mixin breakpoint($user-value) {
    @each $size, $value in $breakpoints{
      @if $user-value == $size { 
        @media #{$value} {
          @content;
        }
      }@else { 
        @error "This Breackpoint '#{$user-value}' isn't supported yet";
      }
    }
  };

  body { 
    @include breakpoint(sm) {
      background-color: blue;
    }
  }

我想尽量减少使用SASS混合编写的代码数量

css

来源：https://stackoverflow.com/questions/75128654/can-someone-tell-me-whats-the-problem-with-this-sass-code

1条答案

按热度按时间

4ioopgfo1#

所以我想明白了，看看这个编辑过的代码：

$breakpoints: (
  "xs": "max-width: 575.98px",
  "sm": "(min-width: 576px) and (max-width: 767.98px)",
  "md": "(min-width: 768px) and (max-width: 991.98px)",
  "lg": "(min-width: 992px) and (max-width: 1199.98px)",
  "xl": "(min-width: 1200px) and (max-width: 1399.98px)",
  "xxl": "min-width: 1400px",
);

  @mixin breakpoint($user-value) {
    $value: map-get($breakpoints, $user-value);
      @if $value { 
        @media (#{$value}) {
          @content;
        }
      }@else { 
        @warn "This Breackpoint '#{$user-value}' isn't supported yet";
      }
  };

  body { 
    @include breakpoint(xxl) {
      background-color: blue;
    }
  }

赞(0）回复(0）举报 2023-01-18

我来回答

css 有人能告诉我这个SASS代码有什么问题吗

1条答案

相关问题

热门标签

最新问答