loops through all spaces (xs, sm, md, lg, xl) and then through all breakpoints and then creates classes like q-pa-sm-md

responsive_helpers.styl

for $space, $value in $spaces

  .q-pa-{$space}
    padding: $value.y $value.x
  .q-pl-{$space}, .q-px-{$space}
    padding-left: $value.x
  .q-pr-{$space}, .q-px-{$space}
    padding-right: $value.x
  .q-pt-{$space}, .q-py-{$space}
    padding-top: $value.y
  .q-pb-{$space}, .q-py-{$space}
    padding-bottom: $value.y

  .q-ma-{$space}
    margin: $value.y $value.x
  .q-ml-{$space}, .q-mx-{$space}
    margin-left: $value.x
  .q-mr-{$space}, .q-mx-{$space}
    margin-right: $value.x
  .q-mt-{$space}, .q-my-{$space}
    margin-top: $value.y
  .q-mb-{$space}, .q-my-{$space}
    margin-bottom: $value.y
for $breakpoint, $width in $sizes
  @media (min-width $width)
    for $space, $value in $spaces
      .q-pa-{$space}-{$breakpoint}
        padding: $value.y $value.x
      .q-pl-{$space}-{$breakpoint}, .q-px-{$space}-{$breakpoint}
        padding-left: $value.x
      .q-pr-{$space}-{$breakpoint}, .q-px-{$space}-{$breakpoint}
        padding-right: $value.x
      .q-pt-{$space}-{$breakpoint}, .q-py-{$space}-{$breakpoint}
        padding-top: $value.y
      .q-pb-{$space}-{$breakpoint}, .q-py-{$space}-{$breakpoint}
        padding-bottom: $value.y

      .q-ma-{$space}-{$breakpoint}
        margin: $value.y $value.x
      .q-ml-{$space}-{$breakpoint}, .q-mx-{$space}-{$breakpoint}
        margin-left: $value.x
      .q-mr-{$space}-{$breakpoint}, .q-mx-{$space}-{$breakpoint}
        margin-right: $value.x
      .q-mt-{$space}-{$breakpoint}, .q-my-{$space}-{$breakpoint}
        margin-top: $value.y
      .q-mb-{$space}-{$breakpoint}, .q-my-{$space}-{$breakpoint}
        margin-bottom: $value.y