0

我对 Sass 比较陌生，我正在使用 mixin 来处理视网膜版本的图像。

在我的样式表的一个地方，正在生成一个旧版本的 mixin。

这是我的混音

@mixin retina(){
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 
        @content;
    }
}

这是一个有效的 Sass 包括

background:url(/img/yt-icon-grey.png) left center no-repeat;    
@include retina(){
    background:url(/img/yt-icon-grey-retina.png) left center no-repeat; 
    @include vendor(background-size, 22px 20px);
}

哪个输出

background: url(/img/yt-icon-grey.png) left center no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .footer-social .footer-yt {
        background: url(/img/yt-icon-grey-retina.png) left center no-repeat;
        -webkit-background-size: 22px 20px;
        -moz-background-size: 22px 20px;
        -ms-background-size: 22px 20px;
        -o-background-size: 22px 20px;
        background-size: 22px 20px; } }

正如预期的那样

但是这个，貌似一样

background:url(/img/telephone-icon.png) left center no-repeat;  
padding-left:20px;  
@include retina(){
    background:url(/img/telephone-icon-retina.png) left center no-repeat;   
    @include vendor(background-size, 17px 20px);
}

输出不同

background: url(/img/telephone-icon.png) left center no-repeat;
padding-left: 20px; }
@media only screen and (min-width: 481px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 481px) and (min-resolution: 144dpi) {
    .main-header .telephone {
        background: url(/img/telephone-icon-retina.png) left center no-repeat;
        -webkit-background-size: 17px 20px;
        -moz-background-size: 17px 20px;
        -ms-background-size: 17px 20px;
        -o-background-size: 17px 20px;
        background-size: 17px 20px; } }

我已经删除了我的 sass-cache 文件夹和编译文件。但它仍然以这种方式编译。我也尝试过更改类名（.telephone 到 .tel），但它仍然编译错误。

有任何想法吗？

4

0 回答 0