Question

我正在编写一个灵活的Sass网格结构，我想知道是否可以从Sass中的循环生成变量。

目前我有以下内容，适用于12列网格：

$columns: 12;
$col-width: 100%/$columns;

$col-1: $col-width;
$col-2: $col-width*2;
$col-3: $col-width*3;
$col-4: $col-width*4;
$col-5: $col-width*5;
$col-6: $col-width*6;
$col-7: $col-width*7;
$col-8: $col-width*8;
$col-9: $col-width*9;
$col-10: $col-width*10;
$col-11: $col-width*11;
$col-12: $col-width*12;

然后我会应用这样的变量：

.sidebar {
    width: $col-4;
}

.main-col {
    width: $col-8;
}

但是，如果我想要10列网格，我每次都需要手动进行编辑。不是大量的工作，但如果我可以使用循环为我生成变量，那就更好了。

这是理想情况：

$columns: 12;

@for $i from 1 through $columns {
   $col-#{$i}: ($i / $columns) * 100%;
}

然后我可以根据我的网格结构调整$columns变量。我不是100％确定这甚至可以使用Sass实现。但如果是的话会很棒。

请点击此处查看示例：http://www.sassmeister.com/gist/feecef8655dadd54f438e67e6c27dd0c

任何帮助都会感激不尽。

Answer 1

您需要使用@mixin或@function来实现目标。

@mixin示例（http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins）：

$columns: 12;

@mixin col($num) {
  width:100% / $columns * $num;
}

.sidebar {
  @include col(4);
  float: left;
  background: red;
}

.main-col {
  @include col(8);
  float: left;
  background: blue;
}

@function示例（http://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions）：

$columns: 12;    

@function col($num) {
  @return 100% / $columns * $num;;
}

.sidebar {
  width: col(4);
  float: left;
  background: red;
}

.main-col {
  width: col(8);
  float: left;
  background: blue;
}

使用SASS

1 个答案: