css와 반복문 :동일한 코드에 순서에 따라 변화를 주어야 할 때

구현하고 싶은 것

로딩 화면을 구현하는 코딩 중에 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>

해결 : scss의 for문 이용

css의 사용자 종속 변수를 사용하는 이유는 span 태그의 style을 span태그의 자식 요소로서의 순서에 따라 조금씩 변화시키기 위한 것이었다.
그래서 scss의 for 문을 이용하여 이를 해결하였다.

-scss

	@for $i from 1 through 20 {
    span:nth-child(#{$i}){
      transform: rotate( 18deg * $i );
      }