CSS 스프라이트 - 어떻게하면 CSS에서 간단한 수학을 할 수 있습니까?

Question

내 아이콘이 모두 포함 된 아이콘 시트를 사용하고 이제 내 CSS에서 참조하는 아이콘 시트를 사용하고 있습니다.

각 아이콘은 32 * 32이 같은 그리드이다

A1 B1 C1 D1 ... ...

AA BB CC에서의 DD

A2 B2 C2 D2 ....... 등

UU XX YY ZZ ......

여기서 AA = 아이콘, A1 = 마우스를 올리면 A2 = 활성입니다.

그것은 그것 같이 지금 CSS에서 확인을 작동합니다

.icon {

높이 : 32px;

너비 : 32px;

background-image : url ('/ img/slbuttons.png');

}

.AAicon {배경 위치 : 0 픽셀을 0 픽셀}

.BBicon {배경 위치 : -32px의 0 픽셀}

.CCicon {배경 위치 : 0 픽셀 -64px ;}

등 ...을 찾는 것은 그것이 abit를 더 간단하게 어떻게 든 무엇 메신저

, 아이콘 나던 C hange 크기 (32 * 32) 그래서 수동으로 각각의 다른 아이콘을 쓰는 대신, 나는 단지 그 전 참조하고 싶다. :

AAIcon = X0, Y0, BBIcon = X1, Y0, CCIcon = X2, Y0 A1Icon = X0, Y1 등 대신 나는 등의

앉아서 각각 32, 64를 작성해야 96,128, 등 - 직접 (xpos = gridcount * 32, ypos = gridcount * 32)를 만들 수는 없었습니까?

이유는 내가 왜 내 아이콘 팩 크기를 변경 한 다음 다시 모든 값을 다시 작성해야하며 각 블록 아이콘/가리 키기/활성 실제로 좌표를 제외하고 동일합니다, 큰 것입니다. 크기를 정의하는 전역 varialbe를 가질 수 있고 나중에 자동으로 위치 지정을 조정하는 데 도움이된다면 도움이됩니다.

내가 CSS에서 할 수 있는지, 어쩌면 그 CSS3 또는?

CSS 또는 웹 개발 전문가가 아니기 때문에 쉽게 알아볼 수 있습니다.

Answer 1

순수 CSS에서는 아무 것도 수학을 할 수 없습니다. 그것은 엄격하게 스타일 언어입니다. 페이지를 동적으로 스타일링 할 때 몇 가지 옵션이 있습니다.

자신의 언어 인 SASS 및 LESS를 프로세서를 통해 실행할 수 있습니다 (SASS는 Ruby를 사용하고 LESS는 JavaScript를 사용함).

두 번째 옵션은 JavaScript를 사용하는 것이고 초보자에게는 jQuery가 가장 쉬운 옵션 일 것입니다. <script src="js/jquery.js"></script> (또는 Google CDN)과 같은 것을 사용하여 jQuery 소스를 포함하면 표준 JavaScript 외에 jQuery 라이브러리를 자유롭게 사용할 수 있습니다.

<script> 
var iconA = $('.AAIcon'); 
iconA.css('background-position','imgHeight'); 
</script> 

jQuery

: 당신은 동적으로 배경 이미지의 높이에 따라 CSS를 조작 할 jQuery를 사용할 수

<script> 
var imgHeight = $('.icon').height(); //remove the height and width from your CSS first! 
var imgWidth = $('.icon').width(); 
</script> 

:

짧은 조각은 이미지의 높이를 얻을 수

Answer 2

예! CSS 전처리기를 사용하면 수학, 변수 등을 할 수 있습니다. 인기있는 두 가지는 SASS 및 LESS입니다. SASS는 많은 견인력을 얻고 있으며 내가 사용하는 것입니다. 여기에 대한 대단한 개요가 있습니다.당신이 정확하게 당신이 무엇에 관해 얘기하는지 할 수있는 CSS 프리 프로세서와

http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/

. 행운을 빕니다! 그리고 더 쉽게 CSS를 즐기십시오!