Is it possible to convey to CSS a selector with a certain value that css then uses as a variable? e.g.
-- HTML --
<div class-name="div-3"></div>
-- CSS --
.div-(x) {
width: 100px * x;
}
-
CSS has no such feature. You can approximate it with LESS or SASS parameterized mixins.SLaks– SLaks2018-02-01 23:07:40 +00:00Commented Feb 1, 2018 at 23:07
-
people need to understand one day that CSS is used for CSS ... it's not a programming langage, so why you want to do everything with CSS ? Use JS for such things or like @SLaks said, use LESS or SASSTemani Afif– Temani Afif2018-02-01 23:11:19 +00:00Commented Feb 1, 2018 at 23:11
Add a comment
|
1 Answer
No.
But commonly a preprocessor such as Sass (and Less and Stylus, ...) is used to help with this sort of use case. In Sass you could loop through numbers x in a realistic range and generate the rulesets for each. It would output CSS which would explicitly state each rule (.div-1 {...}, .div-2 {...}, etc).
In future you will be able to do something similar to what you want with plain CSS, however, thanks to the attr function. You wouldn't be able to add the number to the class itself, I think, but could have it in a data-width attribute or similar. But at present the attr function is only helpful in the content property, which is not useful to you here.
