如何按类名设置div的宽度答案

【问题标题】：How to set width of div by class name如何按类名设置div的宽度
【发布时间】：2022-01-31 18:04:37
【问题描述】：

我不需要它，只是有兴趣，只有通过没有样式属性的类来设置宽度或其他方式。例如：

<div class="block-500"></div>


div.block-#{$value} {
  width: $value;
}

并且在类中可以是任何值。谢谢

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/…
使用纯 CSS 是不可能的。您不知道可以为类名使用什么值，例如block-1234。您可以创建一个 SASS/LESS 循环，并添加一些上限，例如 9999，以创建具有该数字作为前缀的每个类 - block-9999 将是最大的。但这会创建一个大的 CSS 文件，所以这不是一个好的解决方案。我的 5 美分，如果您遇到此问题，请使用 JS 查找每个 block- 元素，并使用 JS 创建一个 CSS 类选择器，其中包含所有使用的前缀。
@Vucko，遗憾的是（。也许在这种情况下，更好的解决方案是使用样式属性或 js。谢谢）
我的意思是 suffix* ，给您带来的不便深表歉意。可以使用内联样式，如下面的答案所述。

标签： html css sass less

【解决方案1】：

试试这个你可以通过这种方式实现。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            background: red;
            width: var(--width);
        }
    </style>
</head>
<body>
    <div class="container" style="--width: 300px;">Content</div>
</body>

</html>

【讨论】：

是的，它正在工作。但是有办法只使用没有样式属性的类吗？
现在，我知道这样做......我会探索这个，如果有可能只使用类来做到这一点
哇，谢谢。会好的）我认为有可能，但不知道如何