html - 在具有不同编号的新 div 上应用 css 类

Question

这是我的问题， 我总结了我在我的网站上的一些经验，你可以在这里看到 http://www.stefanspeter.fr/eng/aboutEng.html

我想自动化它，我使用的是网格形式，每个部分都被命名为 job-[n](所以这里现在是 1 2 3)

我想要的是每次我添加一个新的(所以 4 5 ...)，它直接在上面应用代码

我正在为此使用 scss，我还有一个网格模板区域

这里是网格区域 我知道我可能只是通过工作来改变 job1.2.3，我只是不知道如何

  display: grid;
  grid-gap: 30px;
  grid-template-areas:
    "bioimage bio bio"
    "job1 job2 job3";
  grid-template-columns: repeat(3, 1fr);

这是我的工作 css，正如你在我的网站上看到的那样，我每次都想应用悬停效果

 div[class*='job-']{
      grid-area: job3;
      &:hover {
        transform: scale(1.2);
        font-size: 20px;
      }
    }

我希望我的网格区域可能只占用该行的作业，并且每次我添加一个新作业时 - * 它都会获得悬停效果， 谢谢

Answer 1

您可以使用@each sass 函数https://sass-lang.com/documentation/at-rules/control/each

并预先生成 20 个条目(供将来使用)。

检查这个例子，我认为它非常具有描述性:

https://benfrain.com/working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function/