Html @用于创建.grid.column类时的指令问题

我正在使用SCSS创建网格布局，特别是SCSS中的

@for

指令

还需要注意的是，在css转义的帮助下，我在标记中使用了数值类

这是我的SCS：

$columns: 12;
$column: 100% / $columns;

@for $i from 1 through $columns {
  @if $i == 10 {
    $i: 1 0;
  } @else if $i == 11 {
    $i: 1 1;
  } @else if $i == 12 {
    $i: 1 2;
  }

  .row .\3#{$i} .columns {
    width: $column * $columns;
  }
}

这将编译为以下内容：

.row .\31 .columns {
  width: 100%;
}
.row .\32 .columns {
  width: 100%;
}
.row .\33 .columns {
  width: 100%;
}
.row .\34 .columns {
  width: 100%;
}
.row .\35 .columns {
  width: 100%;
}
.row .\36 .columns {
  width: 100%;
}
.row .\37 .columns {
  width: 100%;
}
.row .\38 .columns {
  width: 100%;
}
.row .\39 .columns {
  width: 100%;
}
.row .\31 0 .columns {
  width: 100%;
}
.row .\31 1 .columns {
  width: 100%;
}
.row .\31 2 .columns {
  width: 100%;
}

我的问题是类

.10

、

.11

和

.12

。由于我在第一个数字后面添加了一个

@if

所需的空格（css转义通常需要这样做），所以现在我需要删除第二个数字后面的第二个空格。这在Sass/SCSS中可能吗

因此，如果这是我想要的功能，那么单数类的编写方式如下：

.row .\31 .columns { width: 100%; }

.row .\31 2.columns { width: 100%; }

多个数字类的编写方式如下：

.row .\31 .columns { width: 100%; }

.row .\31 2.columns { width: 100%; }

---

我知道css在编译时不是特别有效。我真正想要的答案是什么是SCSS，什么是不可能的

您基本上想要的是在数字的第一位之后引入一个空格。因此，如果是

1

，您需要

1

，如果是

11

，您需要

1

下面的代码片段将帮助您实现这一点。他们都是从，所以一定要检查

在列表的索引

n

处插入值 将列表转换为字符串 用法

---

---

因此，对于您的问题，请使用

insert nth

在列表的第二位插入空格，并使用空字符串作为分隔符将列表转换为字符串。然后将这个字符串插入选择器。

也许我需要编辑上面的问题。该空间需要用于单数类。空格必须位于要转义的字符后面。e、 g..\31.列。那么，如果我按照你的建议去做，那么我如何在单个字符/数字类之后引入空格呢？那么，在Sass/SCSS中是否可能实现这一点？请让我知道这是否有意义。因此，我正在寻找

@for

和

@if

来输出此

\31。列
（单字符），然后是此
\31 1。列
（双字符）。我不确定如何在Sass/SCSS中执行此操作，并且找不到答案/文档提供帮助。我想我明白了！谢谢你！非常感谢。比我想象的要复杂。但至少这一切都是可能的，呃！不过，大多数时候函数都只是类型签入。实际逻辑与您如何用任何编程语言编写的逻辑相差不远。
@function to-string($list, $glue: '', $is-nested: false) {
  $result: null;

  @for $i from 1 through length($list) {
    $e: nth($list, $i);

    @if type-of($e) == list {
      $result: $result#{to-string($e, $glue, true)};
    }

    @else {
      $result: if($i != length($list) or $is-nested, $result#{$e}#{$glue}, $result#{$e});
    }
  }

  @return $result;
}

$list: a, b, c d e, f, g, h;
$new-list: to-string($list);      // abcdefgh
$new-list: to-string($list, '-'); // a-b-c-d-e-f-g-h