.container
	.column.use-css-var
		each i in Array(12)
			.box
	.column.use-static-css
		each i in Array(12)
			.box

$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))