plain-ui/src/scss/helpers/_sizing.scss

/**
 *  Sizing
 *
 *  Width and Height Classes,
 *  Sizes with percentage will calculate with the Reflex Grid
 *
 *
 */

$sizing_steps: 50 !default;

/**
 *  mixin: sizing
 *
 */
@mixin sizing($class, $style, $i, $value)
{
    .#{$class}-#{$i} {
        #{$style}: $value;
    }
}

/**
 *  mixin: sizing for each breakpoint
 *
 *
 */
@mixin sizing_breakpoints($class, $style, $i, $value)
{
    @include media-xs() {
        @include sizing($class, $style, 'xs-' + $i, $value);
    }

    @include media-sm() {
        @include sizing($class, $style, 'sm-' + $i, $value);
    }

    @include media-md() {
        @include sizing($class, $style, 'md-' + $i, $value);
    }

    @include media-lg() {
        @include sizing($class, $style, 'lg-' + $i, $value);
    }

    @include media-xlg() {
        @include sizing($class, $style, 'xlg-' + $i, $value);
    }
}

.w-0 { width: 0; }
.h-0 { height: 0; }
.w-1 { width: 1px;}
.h-1 { height: 1px; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

@for $i from 1 through $reflex-columns
{
    $value: percentage(($i / $reflex-columns));

    @include sizing('w-col', 'width', $i, $value);
    @include sizing_breakpoints('w-col', 'width', $i, $value);

    $value: percentage(($i / $reflex-columns));

    @include sizing('h-col', 'height', $i, $value);
    @include sizing_breakpoints('h-col', 'height', $i, $value);
}

@for $i from 1 through $sizing_steps
{
    $value: #{($i * 0.5)}rem;

    @include sizing('w', 'width', $i, $value);
    @include sizing_breakpoints('w', 'width', $i, $value);
}

@for $i from 1 through $sizing_steps
{
    $value: #{($i * 0.5)}rem;

    @include sizing('h', 'height', $i, $value);
    @include sizing_breakpoints('h', 'height', $i, $value);
}