산술 연산을 사용하는 CSS 변수가 속기 속성에서 작동하지 않습니까?

Question

CSS 변수의 산술 연산이 코드를 손상시키는 이유를 알아보십시오.

나는 하나의 규칙과 간단한 CSS 파일을 시작 : 브라우저에서

html { 
    font: 16px/32px Arial; 
} 

, 그것은 기록 된대로 작동 : 글꼴 크기가 줄 높이가 32px입니다 16px이며, 글꼴 자체가 굴림이다.

은 그 때 나는 변수 추가 : 그것은 너무 작품

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size); 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
} 

을; 줄 크기가 16px라고 생각했습니다. 글꼴 크기와 동일하게 만들었 기 때문입니다. ,

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size) * 2; 
    font: var(--default-font-size)/var(--default-line-height) Arial; /* not working! */ 
} 

모든 속성 font-sizeline-height을하고 font-family는 브라우저의 기본값으로 설정 : 내가 두 번째 값을 multiplicated 때

는하지만, 글꼴 선언은 작동이 중지.

나는 세 가지 긴 형식의 특성에 font 약식 속성을 분할하는 경우는, 코드 확인을 다시 작동 : 이전 코드 샘플에 문제가 있습니다 그것은 긴 형식으로 분할없이 작동 할 수있는 방법이 무엇

html { 
    --default-font-size: 16px; 
    --default-line-height: var(--default-font-size) * 2; 
    font-size: var(--default-font-size); 
    line-height: var(--default-line-height); 
    font-family: Arial; 
} 

속성?

Answer 1

는이 같은 calc를 사용해야합니다 :

--default-line-height는이 같은 ( 유효하지) 그래서 evalutated하기 전에 font 속성에 교체

html { 
    --default-font-size: 16px; 
    --default-line-height: calc(var(--default-font-size) * 2); 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
} 

:

font: var(--default-font-size)/var(--default-font-size) * 2 Arial; 

을 calc을 사용하면 표현식을 평가하고 올바른 구문을 사용할 수 있습니다. 세 번째 예도 작동하지 않습니다. 그것이 calc

p { 
 
    --default-font-size: 16px; 
 
    --default-line-height: calc(var(--default-font-size) * 4); 
 
    font: var(--default-font-size)/var(--default-line-height) Arial; 
 
}

<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>