假设我有一些CSS，例如：
.modal-350 {
width: 350px;
}
.modal-400 {
width: 400px;
}
.modal-500 {
width: 500px;
}
等。仅使用CSS是否可以仅从类名称设置宽度（或其他属性）？
我知道在javascript中这很容易，而且我也可以使用：
.modal-auto {
display: inline-block;
width:auto;
}
这不是生产代码，我只是很好奇。
不会。即使我们可以在CSS中使用变量，也只能在属性值中使用，而不能在选择器名称中使用。因此，像这样将无法正常工作：
.modal-$size {
width: ${size}px;
}
但是，您可以使用CSS预处理程序（如LESS或SASS），并根据给定的大小自动生成此类规则。
一个SASS示例：
$modal-sizes: 50 100 200 500;
%modal-default {
border-radius: 50%;
color: red;
background: green;
border-color: blue;
}
@mixin modals {
@each $size in $modal-sizes {
.modal-#{$size} {
@extend %modal-default;
width: #{$size}px;
}
}
}
@include modals;
它将编译为：
.modal-50, .modal-100, .modal-200, .modal-500 {
border-radius: 50%;
color: red;
background: green;
border-color: blue;
}
.modal-50 {
width: 50px;
}
.modal-100 {
width: 100px;
}
.modal-200 {
width: 200px;
}
.modal-500 {
width: 500px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句