CODEWITHSUNDEEP
cssfor-loopwhile-loopstylus
John W
John W

Reputation: 21

Stylus loop with different values

I'm trying to create a loop for the following CSS code block, but am not sure how to go about it, a for loop will only repeat the values and I need to somehow insert 2 different values. Is this even possible in Stylus? Or would I need to use while loops in SASS?

@media is-xs
  .q-pa-xs-desktop
    padding: none
  .q-pa-sm-desktop
    padding: none
  .q-pa-md-desktop
    padding: none
  .q-pa-lg-desktop
    padding: none
  .q-pa-xl-desktop
    padding: none
@media is-sm
  .q-pa-xs-desktop
    padding: none
  .q-pa-sm-desktop
    padding: none
  .q-pa-md-desktop
    padding: none
  .q-pa-lg-desktop
    padding: none
  .q-pa-xl-desktop
    padding: none
@media is-md
  .q-pa-xs-desktop
    padding: none
  .q-pa-sm-desktop
    padding: none
  .q-pa-md-desktop
    padding: none
  .q-pa-lg-desktop
    padding: none
  .q-pa-xl-desktop
    padding: none
@media is-lg
  .q-pa-xs-desktop
    padding: $xs-padding-is-lg
  .q-pa-sm-desktop
    padding: $sm-padding-is-lg
  .q-pa-md-desktop
    padding: $md-padding-is-lg
  .q-pa-lg-desktop
    padding: $lg-padding-is-lg
  .q-pa-xl-desktop
    padding: $xl-padding-is-lg
@media is-xl
  .q-pa-xs-desktop
    padding: $xs-padding-is-xl
  .q-pa-sm-desktop
    padding: $sm-padding-is-xl
  .q-pa-md-desktop
    padding: $md-padding-is-xl
  .q-pa-lg-desktop
    padding: $lg-padding-is-xl
  .q-pa-xl-desktop
    padding: $xl-padding-is-xl

Upvotes: 0

Views: 143

Answers (1)

Anna Andriushkina
Anna Andriushkina

Reputation: 11

I didn't quite understand what did you mean by this "is-xs", "is-sm" and so on. But maybe my answer will help you a little.

You can create mixin for a repeating code, or even use a array of some keys that differ each class from others like this:

$sizes = ('xs' 'sm' 'md' 'lg' 'xl')

someMixinName($padding = 'none') // mixin will use 'none' as default
  for size in $sizes
    .q-pa-{size}-desktop
      padding: $padding

and then you can use this mixin in your media queries like this:

$xs-padding-is-lg = 20px

@media (min-width: 600px)
  mixinName()

@media (min-width: 1200px)
  mixinName($xs-padding-is-lg)

...

I hope I helped you.

Upvotes: 1

Related Questions