.container
.column.use-css-var
each i in Array(12)
.box
.column.use-static-css
each i in Array(12)
.box
View Compiled
$d: 40px
$n: 12
$ba: 360deg/$n
.box
width: $d
height: $d
position: absolute
.container
display: flex
width: 100vw
height: 100vh
.column
flex: 1
display: flex
justify-content: center
align-items: center
position: relative
.box
@for $i from 1 to $n
&:nth-child(#{$i + 1})
--a: $i * $ba
--delay: $i
.use-css-var
.box
background-color: skyblue
transform: rotate(var(--a, 0deg)) translate($d*2)
.use-static-css
.box
background-color: salmon
transform: translate($d*2) rotate(var(--a, 0deg))
View Compiled
This Pen doesn't use any external CSS resources.