로딩 화면을 구현하는 코딩 중에 css의 사용자 종속 변수 (style="--main-color: black;") 동일한 모습의 코드에 순서에 따라 변화를 주어야 했다.
구현하고 싶은 로딩
구현하고자 했던 코드
-java script
<div class="loader">
<span style="--i:1" ></span>
<span style="--i:2" ></span>
<span style="--i:3" ></sapn>
</div>
-css
span {
transform: rotate( 18deg * var(i) );
}
react에서는 html 코드에서 style은 object여야하며 해당 object의 속성은 css의 속성(css properties type)이여야 하기 때문에 react에서 css 사용자 종속 변수를 사용하는 것이 어려워 졌다.
-react
<span style={"--i:1"}> </span>
css의 사용자 종속 변수를 사용하는 이유는 span 태그의 style을 span태그의 자식 요소로서의 순서에 따라 조금씩 변화시키기 위한 것이었다.
그래서 scss의 for 문을 이용하여 이를 해결하였다.
-scss
@for $i from 1 through 20 {
span:nth-child(#{$i}){
transform: rotate( 18deg * $i );
}