sass로만 랜덤한 크기의 원을 랜덤한 포지션에 위치시키기

$min-radius: 10px;
$max-radius: 50px;

$container-width: 100px;
$container-height: 100px;

@for $i from 1 through 10 {
  $random-x: random($container-width);
  $random-y: random($container-height);
  $random-radius: random($max-radius - $min-radius) + $min-radius;

  .circle-#{$i} {
    width: $random-radius;
    height: $random-radius;
    border-radius: 50%;
    background-color: blue;
    position: absolute;
    top: $random-y;
    left: $random-x;
  }
}

 

면접질문중 sass를 얼마나 활용하고 있는지에 대해 물어보신 질문이었다.

기존엔 믹스인으로 자주 쓰는 코드를 묶고. 변수를 저장하며. 페이지별로 컴포넌트를 관리하는 용도로 사용만 해보았지 저런 화면을 그릴 일이 없어 모르겠지만 구글링을 통해 알아내겠다. 하고 지나갔다. 하지만 정말 지나가면 남는 것도 없지! 부족한 부분을 알았으니 찾아서 정리해 보았다. javascript처럼 for문을 돌려서 클래스를 엄청찍어내는 방법도 있고 random이라는 함수도 들어가 있다는 것도 알게 되었다.

 

그런데 이 상태로는 클래스 선언을 한것 뿐이지. html상에 요소가 하나도 없기 때문에 아무것도 안보일텐데 면접관이 원한 답이 확실하게 맞는지는 모르겠다.