나침반 : Sprite 위치를 백분율로 내보내기

나침반의 스프라이트 생성기를 사용하는 경우 생성기는 픽셀을 기반으로 CSS 규칙을 만듭니다.나침반 : Sprite 위치를 백분율로 내보내기

예제 코드 :

예 출력 :

/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */ 
.sprite-2-00 { 
    background-position: 0 0; 
} 

/* line 84, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */ 
.sprite-2-00 { 
    background-position: -244px 0; 
}

그들에게 응답하여 사용할 수 있도록 이러한 순서대로 백분율로 생성 할 수있는 방법이 있나요?

본인이 직접 작성했지만 일부 브라우저에서는 제대로 작동하지 않습니다. 픽셀 기반의 접근 방식이 가장 잘 작동하도록 발전기 최적화의 특별한 종류를 할 수 있기 때문

@mixin sprite-percentage-step-generate($steps, $single_image_width) { 
    $total_image_width: ($single_image_width * $steps) - $single_image_width; 
    background-position: 0 0; 
    img { 
     display: none; 
    } 
    @for $i from 0 through ($steps - 1) { 
     $step_width: $i * $single_image_width; 
     &.step-#{$i} { 
      background-position: percentage(($step_width/$total_image_width)) 0; 
      // We include these to see the relation between the percentage and the step count 
      img { 
       display: none; 
      } 
     } 
    } 
}

어쩌면 이것은 좋은 생각이 아닌, : 여기 내 접근 방식인가?

다시 질문 : Compass가 스프라이트의 위치가 픽셀이 아닌 백분율로 생성되는 CSS를 생성하도록 만드는 방법이 있습니까?

출처

2014-09-10 Jorge Silva

어떻게 생각하십니까? 픽셀을 백분율로 변환 할 수 없습니다. 백분율로 표시되는 background-position 속성은 이미지가 아닌 요소에 상대적입니다. 순수한 CSS *를 사용하여 원하는 결과를 얻는 방법에 대해 생각한 다음 Sass를 사용하여 수행하는 방법에 대해 질문해야합니다. – cimmanon

나는 혼란을 이해하지 못한다. 나는 이미이 작업 버전을 가지고있다. 이것이 작동하는 이유는 하나의 이미지의 너비와 모든 스프라이트의 스텝 수를 알고 있다면 그 배경 이미지를 백분율로 설정하고'background-position-x'를 a로 설정하면됩니다. 백분율. 뭐가 문제 야? 픽셀을 비율로 변환 할 필요가 없습니다. –

질문에 직접 답하기 위해'background-position-x '를 사용하는 것은이 스프라이트의 스텝 수로'background-size'를 설정하는 것에 기반합니다 (모든 이미지가 같은 너비라는 것을 잊었습니다). –

마지막으로 해결 방법은 모든 백분율에 소수 자리가 없도록하거나 소수점 이하 1 자리를 사용하는 것입니다. 이것은 모든 브라우저에서 아름답게 작동합니다.

이상한 이미지 수가있는 스프라이트의 경우 (이 스프라이트가 모두 동일한 너비 임) 해결책은 이미지를 더 크게 만드는 것입니다. 예를 들어, 이미지에 17 개의 슬라이드가있는 경우 이미지를 확장하여 25를 시뮬레이트 할 수 있으므로 브라우저에서 올바르게 렌더링되는 백분율을 만들 수 있습니다.

출처

2014-09-11 01:52:56

나침반 : Sprite 위치를 백분율로 내보내기

답변

관련 문제