1
background-size
속성에 $image-width
및 $image-height
인수를 사용하는 데 문제가 있습니다. CSS는 (아래의 코드 예에서 주석 처리 된 행에 표시된대로) 인수를 작성하기로 선택한 경우에만 작동합니다. 동적 버전이 작동하지 않습니다. 내가 뭘 잘못하고있어?이 경우 Sass/SCSS mixin 인수를 올바르게 사용하는 것은 무엇입니까?
게다가이 코드 스 니펫은 장치에서 필요할 때만 망막 버전을로드해야합니다. 더 여기에 읽기 : 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;
}
}
코드를 확인한 결과 제대로 작동하며 'background-size'값이 있습니다. – Roman