Dynamically add styles in css/less by using class name

Question

Is there a way where I could dynamically add the styles in css/less file by just passing in class name ?

For example:

<div class="xyz_20"></div>
<div class="xyz_40"></div>

Instead of writing:

.xyz_20 {width:20px;} .xyz_40 {width:40px;}

Is there a way where i could write a single class .xyz_i and width be automatically added based on the i value, like .xyz_i {width: i px;}` without involving javascript.

If so, Please suggest.

No, but as a workaround, you can write `
`. Then you don't even need to write the class name! — Mr Lister, Dec 18 '17 at 21:38
Thanks for the comment, Mr.Lister. I'm actually trying to avoid inline styles. Just trying to figure out a way where one class will accomodate many divs based on the number provided. — Sandy_22, Dec 18 '17 at 21:41
If you were to say a bit more about your use case, you might get some helpful suggestions for how to do what you're trying to do. — vlasits, Dec 18 '17 at 21:42
@vlasits I have multiple divs of different widths. I want to write a common class for all the divs..and apply styles according to the class name. If the class name is xyz_20, I'd like to add width of 20px to that div and so on — Sandy_22, Dec 18 '17 at 21:45
@Sandy_22 Once upon a time, we were lead to believe that some day we could write things like `
` and `div {width:attr(data-size)}`, but that promise has never come true. I believe they stopped promising it now. — Mr Lister, Dec 18 '17 at 21:45
@MrLister Haha !! I was actually looking for something just like that. — Sandy_22, Dec 18 '17 at 21:47
This is a dupllicate of https://stackoverflow.com/questions/27097530, https://stackoverflow.com/questions/40993082 etc. — seven-phases-max, Dec 19 '17 at 05:11
Possible duplicate of [changing css class variables](https://stackoverflow.com/questions/27097530/changing-css-class-variables) — vlasits, Dec 19 '17 at 18:49

Greg Schmit · Accepted Answer · 2017-12-21T17:15:06.370

3

This is not possible, as far as I know, however this is a great use case for inline styling:

<div class="xyz" style="width:20px"></div>

If you wanted to support a finite number of widths, then you can use recursion to generate classes:

.widthgen(@count) when (@count > 0) {
  .widthgen((@count - 10));
  .xyz_@{count} {
    background-color: red;
    width: @count * 1px;
  }
}

.widthgen(50);

Output:

.xyz_10 {
  background-color: red;
  width: 10px;
}
.xyz_20 {
  background-color: red;
  width: 20px;
}
.xyz_30 {
  background-color: red;
  width: 30px;
}
.xyz_40 {
  background-color: red;
  width: 40px;
}
.xyz_50 {
  background-color: red;
  width: 50px;
}

Lists Plugin

You could use the lists plugin (to install: npm install -g less-plugin-lists) if your widths you want to support are not easily captured in a linear pattern:

@widths: 10, 20, 40, 50;

.for-each(@i in @widths) {
    .xyz_@{i} {
        background-color: red;
        width: @i * 1px;
    }
}

You would compile that with:

lessc --lists in.less out.css

And you would get:

.xyz_10 {
  background-color: red;
  width: 10px;
}
.xyz_20 {
  background-color: red;
  width: 20px;
}
.xyz_40 {
  background-color: red;
  width: 40px;
}
.xyz_50 {
  background-color: red;
  width: 50px;
}

edited Dec 21 '17 at 17:15

answered Dec 18 '17 at 21:40

Greg Schmit

4,275
2
21
36

Thanks for the answer, Greg.. I'm actually trying to avoid inline styles. Just trying to figure out a way where one class will accomodate many divs based on the number provided – Sandy_22 Dec 18 '17 at 21:42
@Sandy_22 I wonder if lists would help you. I added those to my answer. – Greg Schmit Dec 18 '17 at 21:56
@Sandy_22, I added recursion also which allows you to generate classes without having to use the lists plugin. – Greg Schmit Dec 21 '17 at 17:16
As you mentioned, it works for finite number of widths, which is great !! Is there a way to add classes for infinite widths. For instance, using the above example, i HAVE to write classes <= 50. If there's a way to write > 50, please suggest – Sandy_22 Feb 28 '18 at 21:05
@Sandy_22 Because ultimately `less` is compiled into CSS, this is impossible, since this would result in a CSS file that is infinitely large. – Greg Schmit Mar 01 '18 at 01:29
@Sandy_22 But I cannot think of a good use case for your example. You might just want to set an arbitrarily high width (like 10,000) and build everything below that. You might also reconsider your design strategy, since (as I mentioned) this is a great use case for inline styling rather than classes. – Greg Schmit Mar 01 '18 at 01:30

score 0 · Answer 2 · answered Dec 18 '17 at 22:05

0

No.

There is no way to write classes and expect the browser to infer meaning from them.

The only way to accomplish something similar to this would be with javascript (which OP said they did now want to use).

answered Dec 18 '17 at 22:05

vlasits

2,215
1
15
27

I think this should be the accepted answer. It will make it so that future people who google your question will get an answer. – vlasits Dec 19 '17 at 02:21
1

I think your answer would be better if you provided helpful alternatives. – Greg Schmit Dec 21 '17 at 17:16
That's true. Your current answer is better for that reason. – vlasits Jan 01 '18 at 23:16

Dynamically add styles in css/less by using class name

2 Answers2

Lists Plugin