0

私は比較的 Sass を使い始めたばかりで、Retina バージョンの画像に mixin を使用しています。

スタイルシートの 1 か所で、古いバージョンの 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