2014-11-13 2 views
2

내가 덜 변수가 그래서 쉽게 여러 아이디어를 확인할 수있는 레이아웃의 브레이크 포인트를 만들기 위해 노력하고있는 정의하지만,이 :내 LESS 수학 연산 내 미디어 쿼리에서 작동하지 않는 것은

@breakpoint: 500px; 

@media all and (min-width: @breakpoint){ 
    #someid{ 
    height: 4321px; 
    } 
} 
@media all and (min-width: @breakpoint + 1){ 
    #someid{ 
    height: 1234px; 
    } 
} 
#someid{ 
    height: @breakpoint + 1; 
} 

컴파일 여기에 :

@media all and (min-width: 500px) { 
    #someid { 
    height: 4321px; 
    } 
} 
@media all and (min-width: 500px + 1) { /*THE PROBLEM*/ 
    #someid { 
    height: 1234px; 
    } 
} 
#someid { 
    height: 501px; 
} 

변수에 대한 계산은 미디어 쿼리에서 발생하지 않으며, 적어도 예상대로는 아닙니다. 이 문제를 해결할 수있는 방법이 있습니까? 또한 버그입니까? 파일을 등록해야합니까?

+1

참조 http://stackoverflow.com/q/24241544/2712740 –

+2

당신의 식에 괄호를 추가합니다'(최소 폭 : (500px + 1px))' – TylerH

+0

@TylerH 그게 다예요. 어디서나 찾을 수 없으니 대답에 넣으면 받아 들일 것입니다. – Tim

답변

6

calc() 메서드의 CSS 논리처럼 이미 (괄호 집합으로 캡슐화 된) 미디어 쿼리의 방정식은 여분의 괄호 집합으로 캡슐화해야합니다. 이 작동하지 않습니다

(min-width: 500px + 1) {CSS goes here} 

그러나이 것 :

(min-width: (500px + 1px)) {CSS goes here}