Framework Generator

framework.scss

$properties: (
    m: margin,
    p: padding
);

$directions: (
    t: top,
    b: bottom,
    l: left,
    r: right,
    a: all
);

$queries: (
    sm: 36em,
    md: 48em,
    lg: 62em,
    xl: 75em,
    xx: 90em
);

$min: 1;
$max: 100;

///
// Converted integer to negative number.
//
// @since 1.0.0
//
// @param {number} $value Any number greater than 0.
//
// @return {number} Negative numerical value.
///
@function neg($value) {
    @if $value == 0 {
        @return $value;
    }

    $value: $value * -1;

    @return $value;
}

///
// REM calculator.
//
// @uses neg()
//
// @param {number} $size Any number to convert to a rem value.
//
// @return {number} Output converted number in `rem` units.
///
@function rem-calc($size) {
    @if $size > 0 {
        $size: #{$size / 16}rem;
    } @else if $size < 0 {
        $size: neg($size);
        $size: -#{$size / 16}rem;
    }

    @return $size;
}

///
// Single rule generator.
//
// @since 1.0.0
// @access private
//
// @uses rem-calc()
//
// @param {string} $property  Accepts 'margin', 'padding'.
// @param {string} $direction Accepts 'top', 'bottom', 'left', 'right', 'vertical',
//                            'horizontal'.
// @param {number} $i         Current interation.
///
@mixin -rule-generator($property, $direction, $i) {
    @if $direction == all {
        #{$property}: rem-calc($i);
    } @else {
        #{$property}-#{$direction}: rem-calc($i);
    }
}

///
// Rule generator.
//
// @since 1.0.0
//
// @uses -rule-generator()
//
// @param {number} $min        The smallest number allowed. Default 1.
// @param {number} $max        The largest number allowed. Default 100.
// @param {map}    $properties Allowed CSS properties to generate.
// @param {map}    $directions Every direction: 'top', 'right', 'bottom', 'left'.
// @param {string} $query      Individual breakpoint names: 'sm', 'md', 'lg', 'xl', 'xx'.
///
@mixin rule-generator($min, $max, $properties, $directions, $query: '') {
    @if $query == '' {
        $query: '-';
    } @else {
        $query: '-' + $query;
    }

    @for $i from $min through $max {
        $i: $i * 5;
        $v: neg($i);

        @each $prop, $property in $properties {
            @each $dir, $direction in $directions {
                $class: '';
                $negative: '';

                @if $dir == a {
                    $class: $class + 'm' + $query + '-' + $i;
                    $negative: $negative + 'm' + $query + '-' + $v;
                } @else if ($dir == 't' or $dir == 'b') {
                    $class: $class + 'm' + $dir + $query + '-' + $i + ', .mv' + $query + '-' + $i;
                    $negative: $negative + 'm' + $dir + $query + '-' + $v + ', .mv' + $query + '-' + $v;
                } @else if ($dir == 'l' or $dir == 'r') {
                    $class: $class + 'm' + $dir + $query + '-' + $i + ', .mh' + $query + '-' +  $i;
                    $negative: $negative + 'm' + $dir + $query + '-' + $v + ', .mh' + $query + '-' +  $v;
                }

                .#{$class} {
                    @include -rule-generator($property, $direction, $i);
                }

                @if $property == margin {
                    .#{$negative} {
                        @include -rule-generator($property, $direction, $v);
                    }
                }
            }
        }
    }
}

@include rule-generator($min, $max, $properties, $directions);

@media screen and (max-width: 35.99875em) {
    $query: 'xs';
    @include rule-generator($min, $max, $properties, $directions, $query);
}

@each $query, $min-size in $queries {
    @media screen and (min-width: #{$min-size}) {
        @include rule-generator($min, $max, $properties, $directions, $query);
    }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}