scss-library/components/01_Layouts/fan/_fan.scss

@mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {

    #{$-prefix}__Container#{$-suffix} {
        flex-direction: row;
    }

    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
        min-width: $-base_width;
        height: $-base_height;
    }
}

@mixin RV-Fan--vertical($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
    #{$-prefix}__Container#{$-suffix} {
        flex-direction: column;
        width: max-content;
    }

    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
        width: $-base_width;
        min-height: $-base_height;
    }
}

@mixin RV-Fan--auto($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {

    #{$-prefix}__Container#{$-suffix} {
        flex-flow: row wrap;
    }

    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
        width: calc(100% - #{$-base_width});
        min-width: $-base-width;
        height: $-base_height;
    }
}

@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {

    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Base,
    #{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
        flex-grow: 1;
    }
}

@mixin RV-Fan ($-base_height, $-base_width, $-prefix: '&') {
    @include RV-Fan--vertical($-base_height, $-base_width, $-prefix, '--vertical');
    @include RV-Fan--horizontal($-base_height, $-base_width, $-prefix, '--horizontal');
    @include RV-Fan--auto($-base_height, $-base_width, $-prefix, '--auto');
    @include RV-Fan--fullWidth($-base_height, $-base_width, $-prefix, '--fullWidth');

    #{$-prefix}__Container {
        display: flex;
    }

    #{$-prefix}__Base {
        height: $-base_height;
        width: $-base_width;
        flex: 0 0 auto;
    }

    #{$-prefix}__Surface {
        @include RV-ContentCrop;
    }
}

.RV-Fan {
    @include RV-Fan(280px, 320px);
}