SCSS重复值? [英] SCSS repeat value?

问题描述

我正在尝试在SCSS上进行类似的工作:

I'm trying to work out on SCSS how I would go about something like this:

我希望页边距在1像素到1000像素之间，并且要有一个类.

I would like to have a margin anywhere between 1px and 1000px and have a class for it.

例如 .MarginTop-x

For example .MarginTop-x

X是我可以写入任何值的位置.显然我无法写出

X being where I can write any value. Obviously I couldn't write out

.MarginTop-1 {margin-top:1px}
.MarginTop-2 {margin-top:2px}
.MarginTop-3 {margin-top:3px}
.MarginTop-4 {margin-top:4px}

等...

推荐答案

好吧，您需要一个@for循环来做到这一点.

Well you need a @for loop to do that .

SCSS:

$class-slug: ".MarginTop";
$stop-loop:  4;

@for $i from 0 through $stop-loop {
  #{$class-slug}-#{$i} {
    margin-top: #{$i}px;
  }
}

已编译的CSS:

.MarginTop-0 {
  margin-top: 0px; }

.MarginTop-1 {
  margin-top: 1px; }

.MarginTop-2 {
  margin-top: 2px; }

.MarginTop-3 {
  margin-top: 3px; }

.MarginTop-4 {
  margin-top: 4px; }

这篇关于SCSS重复值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！