$count: 10;

​

html, body {

    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    // background: #000;

}

​

.g-container {

    position: relative;

    width: 300px;

    height: 300px;

}

.g-box {

    position: absolute;

    top:50%;

    left: 50%;

    margin-left: -150px;

    margin-top: -150px;

    width: 100%;

    height: 100%;

    // border: 1px solid #000;

}

​

@for $i from 1 to $count + 1{

    .g-box:nth-child(#{$i}) {

        --width: #{$i * 30}px;

        width: var(--width);

        height: var(--width);

        margin-left: calc(var(--width) / -2);

        margin-top: calc(var(--width) / -2);

        // border-color: hsla(

        //     calc(#{$i * 25}),

        //     50%,

        //     65%,

        //     1

        // );

        background: hsla(

            calc(#{$i * 25}),

            70%,

            65%,

            1

        );

        z-index: #{$count - $i};

        transform: rotate(#{$i * 7}deg);

    }

}