在 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 {
高度：计算（100vw - 15px）；
顶部：计算（0.5 +0.5 * (50vw - 7.5px));
}
.start-row-m-2 +1.row-m-2 {
高度：计算（50vw - 7.5px）；
顶部：计算（0.5 +0.5 * (50vw - 7.5px));
}
.start-row-m-2 +1.row-m-1 {
高度：计算（25vw - 3.75px）；
顶部：计算（0.5 +0.5 * (50vw - 7.5px));
}

基本上每三个“块”递增第一个数字（我的 class）+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);

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

Generate css code after defined pattern with javascript or less

html

javascript

css

jquery

less