SASS cube rubick

$colors:(
    1: #ffc400,
    2: #FFFFFF,
    3: #00FFFF,
    4: #ff004c,
    5: #00ff37,
    6: #fffb00,
);
$speed: 3;

body{
    background: radial-gradient(
        rgb(24, 1, 32) 25%,
        rgba(0, 0, 0, 1) 100%
    );
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contain{
    width: 400px;
    height: 450px;
    perspective: 1000px;
    padding: 5px;
    position: relative;
    .contain-in{
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all $speed * 1s;
        display: flex;
        justify-content: center;
        align-items: center;
        .cube{
            background-color: #000;
            $size-cube: 200;
            $size-m-cube: ($size-cube / 2);
            position: absolute;
            width: $size-cube * 1px;
            height: $size-cube * 1px;
            margin: 0px auto;
            border-radius: 10px;
            &:nth-child(1){
                transform: translateZ(-$size-m-cube * 1px);
            }
            &:nth-child(2){
                transform: rotateY(90deg) translateZ(-$size-m-cube * 1px);
            }
            &:nth-child(3){
                transform: rotateY(90deg) translateZ($size-m-cube * 1px);
            }
            &:nth-child(4){
                transform: translateZ($size-m-cube * 1px);
            }
            &:nth-child(5){
                transform: rotateX(90deg) translateZ(-$size-m-cube * 1px);
            }
            &:nth-child(6){
                transform: rotateX(90deg) translateZ($size-m-cube * 1px);
            }

            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);

        }

        &:hover{
            transform: rotateY(360deg) rotateX(355deg);
        }
    }

    $cont-color: 1;
    @for $i from 1 through 6{
        .cube-out-#{$i}{
            .cube-{
                @for $i from 1 through 9{
                    &#{$i}{
                        background-color: #000;
                        width: 95%;
                        height: 95%;
                        border-radius: 12px;
                        border: 3px solid map-get($colors, $cont-color);
                        box-shadow: 0px 0px 10px map-get($colors, $cont-color) inset;

                    }
                }
            }
        }
        $cont-color: $cont-color + 1;
    }
}