html - 为什么 css repeat() 不使用自定义属性？

Question

我已经定义了一个 css 变量 --num-bricks-per-row，但是在设置网格列时它似乎在 css 重复函数中不起作用。

:root {
    font-size: 10px;
    --num-of-bricks: 40;
    --num-of-rows: 4;
    --num-bricks-per-row: calc(var(--num-of-bricks) / var(--num-of-rows));
    --row-width: 70vw;
    --brick-width: calc((var(--row-width) / (var(--num-bricks-per-row)) * 0.8));
    --all-brick-width: calc((var(--brick-width) * var(--num-bricks-per-row)));
    --num-brick-margin: calc((var(--num-bricks-per-row) + 1) * 2);
    --brick-margin: calc((var(--row-width) - var(--all-brick-width)) / var(--num-brick-margin));
    --brick-height: 2rem;
}

.brickArea {
    display: grid;
    grid-template-columns: repeat(var(--num-bricks-per-row), 1fr);
    grid-template-rows: repeat(var(--num-of-rows), 1fr);
    width: var(--row-width);
    height: calc(var(--row-width) * (var(--num-bricks-per-row) * var(--brick-margin) * 2) * var(--num-of-rows));
    
    background-color: transparent;
}

.brickArea 元素仅显示 1 列 40 行。当我硬编码它的列数时。

但是，下面的代码可以工作，但我不想对其进行硬编码。

.brickArea {
    grid-template-columns: repeat(10, 1fr);
}

标签： htmlcsscss-gridcss-variables