手写笔循环具有不同的值

Question

我正在尝试为以下CSS代码块创建一个循环，但我不确定如何去做，for循环只会重复这些值，我需要以某种方式插入2个不同的值。这在Stylus中甚至可能吗？或者我需要在SASS中使用while循环吗？

@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

Answer 1

我不太明白你的意思是“is-xs”，“is-sm”等等。但也许我的回答会对你有所帮助。

您可以为重复代码创建mixin，甚至可以使用一些键的数组，这些键的每个类与其他类不同，如下所示：

$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

然后你可以在你的媒体查询中使用这个mixin，如下所示：

$xs-padding-is-lg = 20px

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

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

...

我希望我帮助过你。