通过 css 传递参数答案

【问题标题】：passing argument through css通过 css 传递参数
【发布时间】：2022-01-25 04:13:16
【问题描述】：

所以我有一个看起来像这样的代码：

<div className="site-col-1">
   content 1
</div>
<div className="site-col-2">
  content 2
</div>

而css文件看起来是这样的……

.site-col-1 {
    grid-column: span 1;
}

.site-col-2 {
    grid-column: span 2;
}

.site-col-3 {
   grid-column: span 3;
}

有没有办法只将数字作为参数从 div 传递，而不是有一个长的 css 文件。大致如下：

.site-col-ARG {
  grid-column: span ARG
}

【问题讨论】：

无论如何，输出都会是一个很长的 CSS 文件。你想完成什么？
我正在尝试将我的 Css 代码从具有 site-col-1、site-col-2、site-col-3... 等缩短为只有一个属性作为 site-col- ?然后通过 1、2 或 3 inline 得到 grid-column: span ?

标签： html css reactjs sass

【解决方案1】：

你可以使用 styled component 和 react js 来实现同样的效果。

const Div = styled.div`
  /* Change the grid-column value as per the provided props value */
  grid-column: ${props => props.value};
`;

//In your .jsx file
render(
  <div>
    <Div value="1">
      content 1
    </Div>
    <Div value="2">
      content 2
    </Div>
  </div>
);

【讨论】：

【解决方案2】：

无论您说什么都是半真半假，即在您编写代码的 HTML 文件中，然后通过使用诸如 Handlebars、Mustache 等一些 JS_Template 库，这是可能的。

甚至，在 React 中您也可以这样做 --- 但只能在您可以在 JavaScript 的帮助下添加模板的文件中（或通过 JSX 做出反应）。

CSS：

现在，您变得过于雄心勃勃，并试图在纯 CSS 文件中做同样的事情。答案是否。这是不可能的，在 CSS 中

SASS：

是的，如果您使用的是 CSS 预处理器，那么您可以使用 Loops。使用它们（仅当您使用 CSS 预处理器时），您可能会编写如下内容：

@for $i from 1 through 5 {
.site-col-#{$i} {
  grid-column: span #{$i}
}
}

在这里查看：https://codebeautify.org/scss-to-css-converter（选择转换 scss 而不是 sass）。

【讨论】：