私は比較的 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) も変更しようとしましたが、それでもコンパイルがうまくいきません。
何か案は?