유도 된 CSS 값

다른 부분에서 스타일 시트의 한 부분에서 값을 참조 할 수 있습니까? 예를 들어, 다른 요소의 높이와 일치하도록 position:absolute의 div에 CSS top 값을 설정한다고 가정 할 수 있습니까? 실제로 말할 수 있습니까?유도 된 CSS 값

.div1 { 
    height: 50px; 
} 

.div2 { 
    position: absolute; 
    top: <height value of div1> 
}

출처

2014-12-12 Philip Stratford

성공을위한 자바 스크립트 – atmd

'.div1'에 고정 값이 있다면 왜 그 고정 값을'.div2'에 추가하지 않으시겠습니까? – Vucko

당신은 역동적 인 크기의 요소 (유연한 내용 등)를 의미합니까, 아니면 같은 높이에 동일한 번호를 두 번 쓰지 않는 것입니까? – atmd

당신은 SASS 또는 LESS 같은 것을보고 싶을 :

다음에서보세요.

당신은 그 (여기 SASS 예)로 계산 사용할 수 있습니다

$averageHeightDivs : 50;

및

.div2 { 
    height: 2*$averageHeightDivs; 
}

같은 일을하지만, 더 나은 당신이 유지 mixin 사용합니다 :

@mixin divSize($factor, $width, $height) { 
    height: $factor * $height; 
    width: $factor * $width; 
} 

.div1 { 
    @include divSize(1, 10, 20); 
} 

.div2 { 
    @include divSize(2, 10, 20); 
}

출처

2014-12-12 13:49:39 RodrigoDela

SASS 또는 LESS가 얼마나 정확한지 설명 할 수 있습니까? 나는 변수가 없다고 가정하고 있니? – atmd

변수를 사용합니다. 네가 할 수없는 이유가 있니? – RodrigoDela

그게 완벽하게 괜찮아요, 나는 OP가 두 번째 요소의 높이를 알 수 없다는 것을 의미한다고 생각했습니다. 어쩌면 내가 읽는 것을 놓치고, 가치가 알려졌다면 사용하지 않는 것이 좋을 것이라고 가정합니다. – atmd

아니요, 이것은 CSS의 단점 중 하나입니다. 다행히도 CSS를 사용하면 쉽게 사용할 수 있고 여러 가지 일반적인 문제를 해결할 수 있습니다.

Less

SASS

출처

2014-12-12 13:49:25

당신은 할 수 있습니다 sass 변수를 사용하여 이와 같은 작업을 수행하십시오. http://sass-lang.com/guide을 확인하십시오. 기본적으로 재사용 할 각 변수의 값을 설정 한 다음 필요할 때 호출합니다.

출처

2014-12-12 13:53:25 Leighthel

유도 된 CSS 값

답변

관련 문제