SCSS @mixin 기능

Question

내가 사업부의 높이가 폭의 38 % 인 원하고, 폭이 100 %이어야한다, 그래서 내가 뭘하려고 오전이 같은 것입니다 :

@mixin div-dimensions ($width) { 
    width: $width; 
    height: $width * 38; 
} 

(적용 it)

사용자가 창 크기를 조정하면 div의 비율이 유지되기를 바랍니다. 물론 위의 코드는 작동하지 않으며, 높이의 값은 이제 width가 아닌 div의 비율이됩니다. 고마워요!

Answer 1

계산은 컴파일 타임이지만 런타임 의존성이 필요합니다.

대신 다음과 같은 방법을 사용할 수 있습니다

.wrapper { 
 
    padding-top: 38%; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: silver; 
 
}

Just some text 
 
<div class="wrapper"> 
 
    <div class="content"> 
 
    Height is 38% of width 
 
    </div> 
 
</div> 
 
Some other text