Sass CSS边距循环每次递增X个数量

我想知道是否可以用SCS来实现这一点？每次递增X

这很棘手，因为需要更新

-s

或

-md

而不是数字

  @for $i from 1 through 6 {
      .u-marg-t-#{$i} {
        margin-top: 0px + ($i * 8);
      }
    } 

除此之外，这里的

@for

是不是最好的方法

纯CSS输出

.u-marg-t {
    &-xs {
        margin-top: 8px;
    }

    &-sm {
        margin-top: 16px;
    }

    &-md {
        margin-top: 24px;
    }

    &-lg {
        margin-top: 32px;
    }

    &-xl {
        margin-top: 43px;
    }

    &-xxl {
        margin-top: 50px;
    }
}

.u-marg-b {
    &-xs {
        margin-bottom: 8px;
    }

    &-sm {
        margin-bottom: 16px;
    }

    &-md {
        margin-bottom: 24px;
    }

    &-lg {
        margin-bottom: 32px;
    }

    &-xl {
        margin-bottom: 43px;
    }

    &-xxl {
        margin-bottom: 50px;
    }
}

---

您可以使用带有要使用的后缀的列表，并在for循环中进行迭代。下面是一个例子：

$sizes: xs, sm, md, lg, xl, xxl;

@for $i from 1 through 6 {
    .u-marg-t-{
        &#{nth($sizes, $i)} {
            margin-top: 0px + ($i * 8);
        }
    }
}

$sizes是带有后缀的列表。在循环中，我使用函数n（$list，$I）获取列表中$I位置的项。

您想要的是“纯CSS输出”吗？