@for $i from 1 through 10 {
    $size: $i * 10%;
    $name: $i * 10;

    .w-#{$name} {
        width: $size;
    }

    .h-#{$name} {
        height: $size;
    }

}

@media (min-width: $desktop-breakpoint) {
    @for $i from 1 through 10 {
        $size: $i * 10%;
    $name: $i * 10;
    
    .desktop {
        &-w-#{$name} {
            width: $size;
        }
    
        &-h-#{$name} {
            height: $size;
        }
    }
        
    }
}

.full-screen-width {
    width: 100vw;
}

.full-screen-height {
    height: 100vh;
}