Question

我对Sass比较陌生，我正在使用mixin来制作视网膜版图像。

在我的样式表中的一个地方，是生成一个旧版本的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），但它仍然编译错误。

有什么想法吗？

Sass缓存我的mixin但只在一个地方

0 个答案: