@system is a mobile first mixin with super powers

Heavily inspired by TailwindCSS and styled-system

Requirements:

The only requirement is a $breakpoint list or map

Example:

$breakpoints: 0, 768px, 1024px, 1280px;

$breakpoints: (
  sm: 0,
  md: 768px,
  lg: 1024px,
  xl: 1280px
);

Usage

Simply map your css properties using the mixin @system

Esample:

.block {
  @include system((
    font-family: '"lucida grande", Arial, sans-serif',
    font-size: (1rem, 2rem, 3rem),
    font-weight: 700,
    color: (white, black),
    display: (block, flex),
    bg: (black, white),
    mx: (10px, null, 20px),
    p: 10px
  ));
}

Result:

.block {
    font-family: "lucida grande", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    display: block;
    background: black;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
}
@media (min-width: 768px) {
    .block {
        font-size: 2rem;
        color: black;
        display: flex;
        background: white;
    }
}
@media (min-width: 1024px) {
    .block {
        font-size: 3rem;
        margin-left: 20px;
        margin-right: 20px;
    }
}

How it works

As property, you can use a default CSS property or an alias.
As value, you can use: a string, a color, a number, null or a list.

What happen when you use a list?

font-size: (1rem, 2rem, 3rem)

Remember your $breakpoints!

$breakpoints: 0, 768px, 1024px, 1280px;

That means that every value in a list will be assigned to his corresponding breakpoint,
so in this case

//default: 
font-size: 1rem;

@media (min-width: 768px) {
    font-size: 2rem;
}

@media (min-width: 1024px) {
    font-size: 3rem;
}

What if you use a null?
in @system, null means that value will be skipped in his corresponding breakpoint.
If you have something like

font-size: (1rem, null, 3rem)

The result will be:

//default: 
font-size: 1rem;

@media (min-width: 1024px) {
    font-size: 3rem;
}

That's it!

Aliases

An alias is an abbreviation for one or more CSS properties. Here's a list of the available aliases

inset: (top, right, bottom, left),

bg: background,

m: margin,
mt: margin-top,
mr: margin-right,
mb: margin-bottom,
ml: margin-left,
mx: (margin-left, margin-right),
my: (margin-top, margin-bottom),

p: padding,
pt: padding-top,
pr: padding-right,
pb: padding-bottom,
pl: padding-left,
px: (padding-left, padding-right),
py: (padding-top, padding-bottom),

w: width,
min-w: min-width,
max-w: max-width,

h: height,
min-h: min-height,
max-h: max-height,