sass mixin响应式媒体查询

问题描述

最近，我正在尝试使用sass创建一个可帮助我进行响应式设计的mixin /函数，但是在过去三天中，我一直陷于一个问题，并且尝试了多种方法，但无济于事。 / p>

问题：
所以我面临的问题是当sass编译时，它输出如下内容：
我不希望输出像这样

@media only screen and (min-width: 1920px) {
  h1 {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 2560px) {
  h1 {
    font-size: 6rem;
  }
}

@media only screen and (min-width: 3840px) {
  h1 {
    font-size: 7rem;
  }
}

@media only screen and (min-width: 1920px) {
  h1 {
    margin-top: 0.8rem;
  }
}

@media only screen and (min-width: 2560px) {
  h1 {
    margin-top: 1rem;
  }
}

@media only screen and (min-width: 3840px) {
  h1 {
    margin-top: 1.8rem;
  }
}

我希望输出像这样

@media only screen and (min-width: 1920px) {
  h1 {
    font-size: 4rem;
    margin-top: 0.8rem;
  }
}

@media only screen and (min-width: 2560px) {
  h1 {
    font-size: 6rem;
    margin-top: 1rem;
  }
}

@media only screen and (min-width: 3840px) {
  h1 {
    font-size: 7rem;
    margin-top: 1.8rem;
  }
}

这是我的sass文件：

// function
@function size-number($base-size,$new-size) {
    @if $new-size != 0 {
        @return $new-size;
    } @else {
        @return $base-size;
    }
}



// mixin
@mixin break-points-size ($properties) {
    $PROPERTIES: $properties;
    @each $PROPERTY-KEY,$PROPERTY-VALUE in $PROPERTIES {
        $SIZE-NUMBERS: map-get($PROPERTY-VALUE,"size" );

        $BREAK-POINTS: (
            "screen1080": (
                "break-point": "1920px","base-size":  size-number(1,nth($SIZE-NUMBERS,1))
            ),"screen1440": (
                "break-point": "2560px","base-size": size-number(2,2))
            ),"screen2160": (
                "break-point": "3840px","base-size": size-number(3,3))
            )
        );


        $INDIV-PROPERTY-KEY: $PROPERTY-KEY;
        $VALUE-NUMBERS: map-get($PROPERTY-VALUE,"value" );

        
        @each $BREAK-POINT-KEY,$BREAK-POINT-VALUE in $BREAK-POINTS {
            $INDIV-BREAK-POINT: map-get($BREAK-POINT-VALUE,"break-point");
            $INDIV-BASE-SIZE: map-get($BREAK-POINT-VALUE,"base-size");
            @media only screen and (min-width:$INDIV-BREAK-POINT) {
                #{$INDIV-PROPERTY-KEY}: $VALUE-NUMBERS * $INDIV-BASE-SIZE;
            }
        }        
    }
};





*{
    margin:0;
    padding:0;
}


h1{
    @include break-points-size(("font-size":("value": 2rem,"size": (2,3,3.5)),"margin-top":("value": 1rem,"size": (0.8,1,1.8))));


}

我只是找不到我做错了什么部分

解决方法

这是断点的混合，您可能会觉得有用。它解决了针对每个不同属性为同一媒体查询提供多个副本的问题。

C.__mro__

像这样使用它：

max_connections         = 600
connect_timeout         = 5
wait_timeout            = 60
interactive_timeout     = 60