在用javascript或更少的代码定义模式后生成css代码

Question

有办法"生成"；代码遵循我指定的模式？也许是一个网站，一些"；技巧"；用excel或某种编程语言(我可能不知道(？

我的css如下：

.start-row-m-1.row-m-4 {
height: calc(100vw - 15px);
top: 0;
}
.start-row-m-1.row-m-2 {
height: calc(50vw - 7.5px);
top: 0;
}
.start-row-m-1.row-m-1 {
height: calc(25vw - 3.75px);
top: 0;
}
.start-row-m-2.row-m-4 {
height: calc(100vw - 15px);
top: calc(0.5 * (50vw - 7.5px));
}
.start-row-m-2.row-m-2 {
height: calc(50vw - 7.5px);
top: calc(0.5 * (50vw - 7.5px));
}
.start-row-m-2.row-m-1 {
height: calc(25vw - 3.75px);
top: calc(0.5 * (50vw - 7.5px));
}
.start-row-m-3.row-m-4 {
height: calc(100vw - 15px);
top: calc(1 * (50vw - 7.5px));
}
.start-row-m-3.row-m-2 {
height: calc(50vw - 7.5px);
top: calc(1 * (50vw - 7.5px));
}
.start-row-m-3.row-m-1 {
height: calc(25vw - 3.75px);
top: calc(1 * (50vw - 7.5px));
}

我认为这足以让你明白这个想法。

我每行有3个代码段，所有变化都是一些小数字。

我想象的伪代码是这样的：

.start-row-m-2+1.row-m-4｛
高度：calc(100vw-15px(；
顶部：calc-2+1.rrow-m-1｛
高度：计算值(25vw-3.75px(；
顶部：计算值(0.5+0.5*(50vw-7.5px((
}

基本上每三个"；块"；将第一个数字(我的类(加1，并在我的计算中加0.5。到目前为止，我只手动完成了大约40行，但对于不同的视口，我需要更多。

我原来的css是用less编写的，也许在less中内置了一些东西可以帮助我？

我希望标签是合适的。因为我不知道如何实现这一点，我标记了一些我可以想象它可以使用的东西。

Answer 1

您可以使用LESS:

.loop (@i, @n) when (@i < 40)
{
.start-row-m-@{i}.row-m-4 {
height: calc(100vw - 15px);
top: calc( @n * (50vw - 7.5px));
}
.start-row-m-@{i}.row-m-2 {
height: calc(50vw - 7.5px);
top: calc(@n * (50vw - 7.5px));
}
.start-row-m-@{i}.row-m-1 {
height: calc(25vw - 3.75px);
top: calc(@n * (50vw - 7.5px));
}
.loop(@i + 1, @i * 0.5)
}
.loop(1, 0);

或者javascript:

let css = "";
for(let i = 0; i < 40; i++)
{
css += `.start-row-m-${i + 1}.row-m-4 {
height: calc(100vw - 15px);
top: calc(${i * 0.5} * (50vw - 7.5px));
}
.start-row-m-${i + 1}.row-m-2 {
height: calc(50vw - 7.5px);
top: calc(${i * 0.5} * (50vw - 7.5px));
}
.start-row-m-${i + 1}.row-m-1 {
height: calc(25vw - 3.75px);
top: calc(${i * 0.5} * (50vw - 7.5px));
}
`;
}
const style = document.createElement("style");
style.innerHTML = css;
document.head.appendChild(style);