stylus - flexbox help

flexbox.styl

// Flex-box help
// Mobile First
.flexbox {
    display flex
    flex-direction row
    flex-wrap nowrap
    justify-content space-between
    align-items center
    align-content center
}
flex-screen(screenName)
    .{screenName}-dir-row {
        flex-direction row
    }
    .{screenName}-dir-column {
        flex-direction column
    }
    .{screenName}-dir-row-reverse {
        flex-direction row-reverse
    }
    .{screenName}-dir-column-reverse {
        flex-direction column-reverse
    }
    .{screenName}-no-wrap {
        flex-wrap nowrap
    }
    .{screenName}-wrap {
        flex-wrap wrap
    }
    .{screenName}-wrap-reverse {
        flex-wrap wrap-reverse
    }
    .{screenName}-justify-content-start {
        justify-content flex-start
    }
    .{screenName}-justify-content-end {
        justify-content flex-end
    }
    .{screenName}-justify-content-center {
        justify-content center
    }
    .{screenName}-justify-content-space-around {
        justify-content space-around
    }
    .{screenName}-justify-content-space-between {
        justify-content space-between
    }
    .{screenName}-align-items-stretch {
        align-items stretch
    }
    .{screenName}-align-items-baseline {
        align-items baseline
    }
    .{screenName}-align-items-center {
        align-items center
    }
    .{screenName}-align-items-flex-start {
        align-items flex-start
    }
    .{screenName}-align-items-flex-end {
        align-items flex-end
    }
    .{screenName}-align-content-stretch {
        align-content stretch
    }
    .{screenName}-align-content-center {
        align-content center
    }
    .{screenName}-align-content-flex-start {
        align-content flex-start
    }
    .{screenName}-align-content-flex-end {
        align-content flex-end
    }
    .{screenName}-align-content-space-around {
        align-content space-around
    }
    .{screenName}-align-content-space-between {
        align-content space-between
    }
$flexPoints = {
  'flex-sm' : $smPoint  // 600px
  'flex-md' : $mdPoint  // 960px
  'flex-lg' : $lgPoint  // 1264px
  'flex-xl' : $xlPoint  // 1904px
}
flex-screen('flex', 1px)
@media screen and (max-width: $smPoint - 1) {
    flex-screen('flex-xs')
}
for screenName, breakpoint in $flexPoints
    @media screen and (min-width: breakpoint) {
        flex-screen(screenName)
    }