$size: (
    0:  0,
    1:  1px,
    2:  2px,
    5:  5px,
    10: 10px,
    15: 15px,
    20: 20px,
    25: 25px,
    30: 30px,
    35: 35px,
    40: 40px,
    45: 45px,
    50: 50px,
    55: 55px,
    60: 60px,
    65: 65px,
    70: 70px,
    75: 75px,
    80: 80px,
    85: 85px,
    90: 90px,
    95: 95px,
    100: 100px
);
@each $key, $value in $size{
    .f#{$key}{
        font-size: $value;
    }
    .m#{$key}{
        margin: $value;
    }
    .ml#{$key}{
        margin-left: $value;
    }
    .mr#{$key}{
        margin-right: $value;
    }
    .mt#{$key}{
        margin-top: $value;
    }
    .mb#{$key}{
        margin-bottom: $value;
    }
    .mtb#{$key}{
        margin-top: $value;
        margin-bottom: $value;
    }
    .mlr#{$key}{
        margin-left: $value;
        margin-right: $value;
    }
    .p#{$key}{
        padding: $value;
    }
    .pl#{$key}{
        padding-left: $value;
    }
    .pr#{$key}{
        padding-right: $value;
    }
    .pt#{$key}{
        padding-top: $value;
    }
    .pb#{$key}{
        padding-bottom: $value;
    }
    .plr#{$key}{
        padding-left: $value;
        padding-right: $value;
    }
    .ptb#{$key}{
        padding-top: $value;
        padding-bottom: $value;
    }
    .border#{$key}{
        border: $value solid ;
    }
}
$color:(
    black:#000,
    white: #fff,
    darker: #333,
    dark: #999,
    light: #aaa,
    lighter: #eee,
    main: rgb(168, 221, 23),
    info: rgb(13, 245, 110),
    danger: rgb(245, 164, 13),
    text:blue,

);
@each $key, $value in $color{
    .bg-#{$key}{
        background-color: $value;
    }
    .text-#{$key}{
        color: $value;
    }
    .border-color-#{$key}{
        border-color: $value;
    }
}
@mixin size($w, $h) {
    width: $w;
    height: $h;
}
@mixin square($w){
    @include size($w, $w)
}