如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。