如何使用最大纵横比和 Sass 使用分数作为变量？

Question

如何使用 SASS 语言在变量中使用分数？此代码有效：

div{
    @media screen and  (max-aspect-ratio: 54/25) {
       width:100%;
    }
}

此代码无效（它编译，但 $var 似乎等于 0 ）：

$var: 54/25;

div{
    @media screen and  (max-aspect-ratio: $var) {
        width:100%;
    }
}

当我使用 mixin 时，我遇到了同样的奇怪问题。

// THIS MIXIN IS WORKING
@mixin media-maxAspectRatio() {
    @media screen and (max-aspect-ratio: 54/25) {
        &{ @content; }
    }
}

$breakpoints: (
    "mobileWidth": 500px,
    "fraction": 54/25
);

// THIS MIXIN IS NOT WORKING calling "fraction" as $_key 
@mixin media-maxAspectRatio($_key) {
    @media screen and (max-aspect-ratio: map-get($breakpoints, $_key)) 
    {
        &{ @content; 
         }
    }
}

使用 px 值但使用分数 I 似乎很奇怪得到这个不工作。也许是 / 角色？更一般地说，将 sass 变量与媒体查询一起使用的最佳方式是什么，特别是 max-aspect-ratio 和 min-aspect-ratio。谢谢。

Answer 1

您需要将纵横比定义为字符串，否则 Sass 会将表达式编译为数学运算，打印 2.16 而不是 54/25。 Sass 将在编译时不加引号打印它。

$breakpoints: (
    "mobileWidth": 500px,
    "fraction": "54/25"
);

@mixin media-maxAspectRatio($_key) {
    @media screen and (max-aspect-ratio: map-get($breakpoints, $_key)) {
      @content; 
    }
}

检查工作示例here

如何使用最大纵横比和 Sass 使用分数作为变量？

How to use max-aspect-ratio with Sass using fraction as a variable?

variables

sass

fractions

media-queries