스타일러스 (CSS) 계산

Question

내가

.findcol1 > img 
     max-width 1.5em 
     max-height 1em 
     @media screen and (min-width 700px) 
       max-width [1.5 + Math.floor("current_screen_width"/700)]em 
       max-height [1 + Math.floor("current_screen_width"/700)]em 

어떻게 스타일러스에서이 작업을 수행 할 수 있습니다 뭔가를하고 싶은 폭?

(그래서 최대 폭은 변화한다 추천 -
1.5em for width between 0px and 699px 2.5em for width between 700px and 1399px 3.5em for width between 1400px and 2099px, and so on)

Answer 1

옵션 1 -

.findcol1 > img 
     width 1.5em 
     height 1em 
     @media screen and (min-width 700px) and (max-width 1399px) 
       width 2.5em 
       height 2em 
     @media screen and (min-width 1400px) and (max-width 2099px) 
       width 3.5em 
       height 3em 

옵션 2 - (근사해)

$emval = calc((700px - 1em) + 1em) 
// find number of em's in 700px 

.findcol1 > img 
     width 1.5em 
     height 1em 
     @media screen and (min-width 700px) 
       width "calc((100% - %s + 1.5em)" % $emval 
       // Subtract em's in 700px from em's in current screen size 
       // and add to original width 
       height @width/1.5 
       // If aspect ratio is not 1.5, we can do 
       // height "calc((100% - %s + 1em)" % $emval 
       // Here ^^ 100% will equal 100% height of parent element 
       max-width 3em 
       max-height 2em 

,174,

floor()은 Stylus의 변수가 아닌 실수에서만 작동합니다!