如何使用SASS函数动态构建(n X n)网格的网格面积模板
如何使用SASS函数动态构建(n X n)网格的网格面积模板
提问于 2020-12-18 02:31:13
我已经为5x5网格硬编码了以下CSS grid-area-templates：
#grid {
grid-template-areas:
"0-0 0-1 0-2 0-3 0-4"
"1-0 1-1 1-2 1-3 1-4"
"2-0 2-1 2-2 2-3 2-4"
"3-0 3-1 3-2 3-3 3-4"
"4-0 4-1 4-2 4-3 4-4"
}然而，我想要多种大小的网格，并且我想动态地构建它们。因此，我想编写一个接受j和i的函数，以便：
@function buildGrd(j,i) {
@return // [snip]
}
// @buildGrid(5,5) =>
"0-0 0-1 0-2 0-3 0-4"
"1-0 1-1 1-2 1-3 1-4"
"2-0 2-1 2-2 2-3 2-4"
"3-0 3-1 3-2 3-3 3-4"
"4-0 4-1 4-2 4-3 4-4"
#grid-small {
grid-template-areas: @buildGrid(5,5)
}
#grid-large {
grid-template-areas: @buildGrid(25,25)
}我尝试过使用@for和@mixin变体，但到目前为止还很难做到
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-18 03:47:15
下面是如何生成网格的方法：
@function buildGrid($j, $i) {
$template: null;
@for $x from 0 to $j {
$string: '';
@for $y from 0 to $i {
@if $y > 0 { $string: $string + ' '; }
$string: $string + $x + "-" + $y;
}
$template: $template $string;
}
@return $template;
}
#grid-small {
grid-template-areas: buildGrid(5,5);
}
#grid-large {
grid-template-areas: buildGrid(25,25);
}但是，它将在一行上生成模板，如下所示：
#grid-small {
grid-template-areas: "0-0 0-1 0-2 0-3 0-4" "1-0 1-1 1-2 1-3 1-4" "2-0 2-1 2-2 2-3 2-4" [...];
}据我所知，这个代码仍然有效。我不确定是否可以使用SCSS在多行上生成多个字符串。
Stack Overflow用户
发布于 2020-12-18 04:03:19
在这里你也可以这样做
@function buildGrid($j, $i) {
$result: "";
@for $cur from $j - $i to $j {
$result2: "";
@for $current from $j - $i to $j {
@if($result2 == "") {
$result2: #{$cur}-#{$current};
} @else {
$result2: append($result2, #{$cur}-#{$current});
}
}
@if($result == "") {
$result: "#{$result2}";
} @else {
$result: append($result, "#{$result2}");
}
}
@return $result;
}
#grid-small {
grid-template-areas: buildGrid(5, 5)
}
#grid-large {
grid-template-areas: buildGrid(25,25);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65346417
复制相关文章
相似问题
腾讯云开发者
