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

问题描述

有没有办法按照我指定的模式“生成”代码？ 也许是一个网站、一些 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(0.5 +0.5 * (50vw - 7.5px));
}
.start-row-m-2 +1.row-m-2 {
高度：calc(50vw - 7.5px);
顶部：calc(0.5 +0.5 * (50vw - 7.5px));
}
.start-row-m-2 +1.row-m-1 {
高度：calc(25vw - 3.75px);
顶部：calc(0.5 +0.5 * (50vw - 7.5px));
}

基本上每三个“块”增加第一个数字（我的班级）+1，并将 0.5 添加到我的计算中。 到目前为止，我只是手动手动完成了大约 40 行，但对于不同的视口，我需要更多。

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

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

解决方法

你可以用 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);