Question

我对$image-width属性使用$image-height和background-size参数时遇到问题。只有当我选择在适当的位置编写参数时，CSS才有效（如下面代码示例中的注释行所示）。动态版本不起作用。我做错了什么？

除此之外，此代码段应仅在设备需要时加载视网膜版本。点击此处了解更多信息：Media Query Asset Downloading

/* see: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ */
@mixin retina-background($filename, $image-width, $image-height, $extension: ".png") {
    background-image: image-url($filename + $extension);
    height: $image-height;
    width: $image-width;
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {
        background-image: image-url($filename + "2x" + $extension);
        //background-size: 213px 21px;
        background-size: $image-width $image-height;
        height: $image-height;
        width: $image-width;
    }
}

Answer 1

是的，代码运行正常。我忘了在调用函数的参数中分配“px”。因此产生的CSS是错误的（没有单位）。多么无用的错误。非常感谢！

在这种情况下，Sass / SCSS mixin参数的正确使用是什么？

1 个答案: