@use 'sass:color';
@use 'sass:math';

$base-color: pink;

body{
    margin: 0
}

div.columns{
    display: flex;
    height: 100vh;

    & > div{
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    @mixin color-columns($n){
        @for $i from 1 through $n{
            $color: color.adjust($base-color, $hue: ($i - 1) * math.div(360, $n - 1));

            & > div:nth-child(#{$i}){
                background-color: $color;
            }

            & > div:nth-child(#{$i})::before{
                content: "#{$color}";
            }
        }
    }

    @include color-columns(10);
}