How to Set the CSS Class Name Dynamically in Lesscss

Dynamically add styles in css/less by using class name

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;
}

How to create dynamic classes in less

Try to use mixin to achieve this.

//define the mixin 
.margin-top(@value) {
    .margin-top-@{value}{    
        margin-top:@value;
    }
}
//use the mixin like this
.margin-top(20px);

U can try it here: http://winless.org/online-less-compiler

How have dynamic class names in LESS CSS and use them as values in function

You have to create a list of colors first before creating a loop:

.make-classes(@prefix, @list) {
    .iter(length(@list));
    .iter(@i) when (@i > 0) {
        .iter(@i - 1);
        @pair:  extract(@list, @i); 
        @key: extract(@pair, 1);
        @value: extract(@pair, 2); 
        .@{prefix}.color-@{key} {
            color: @value;  
        }
    }
}

@colors:
    ~'blue' #7FB3D4,
    ~'gray' #767676,
    ~'green' #8CC079,
    ~'red' #b35d5d;

.make-classes(link, @colors);

Output:

.link.color-blue {
  color: #7fb3d4;
}
.link.color-gray {
  color: #767676;
}
.link.color-green {
  color: #8cc079;
}
.link.color-red {
  color: #b35d5d;
}

Dynamic class names in LESS

I don't think you're far off. What I've done is create a second variable inside the mixin, called @index2. All this does is find the '920px minus @index' value that you're looking for:

@index2 = (920-@index);

this is then appended to the class name:

(~".gs@{index}-@{index2}") {

This is the complete loop:

.loopingClass (@index) when (@index > 160) {
    @index2 = (920-@index);
    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".gs@{index}-@{index2}") {
    // your resulting css
        width: (@index/20+1)*@col;
    }
    // next iteration
    .loopingClass(@index - 60);
}
// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

In order to get just the set you are looking for (gs220-700 to gs700-220), just change @iterations to equal 700.

Worth noting that currently, this will create the classes in the reverse order of how you specified them in the question.

How to set the CSS class name dynamically in LessCSS?

Support was added to less.js and dotless in version 1.3

You have to use brackets and an escaping string.. e.g.

(~".@{scope} .another") { 
  color: #fff;
}

Edit

This format is deprecated. less 1.3.1 (currently just trunk build of less.js) supports a simpler syntax

.@{scope} .another-class {
    color: white;
}

Dynamic class to element with Less

If I understand you correctly, I believe you're looking for:

table {
  .table;
  .table-striped;
  .table-hover;

  /* Any other default table styles */
}

While you can't add class="table table-striped table-hover" to each element (that's more in the JS-realm), you can get the same effect by using the other classes as mixins added to the default table element's styles. See the LESS documentation for more examples.

How do I dynamically add CSS classes to HTML elements if value is less or greater than 0?

You should try binding class.
Something like that:

<div :class="getDivClasses(value.USD.PRICE)">

and inside methods:

getDivClasses(value) {
  return value > 0 ? "positive" : "negative";
},

How to dynamically create CSS class in JavaScript and apply?

Here is an option:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

How to add common style in less and based on dynamic class add different styles

you can achieve this using the ampersand character to add a class to a class like below:

.common {
  color: blue
  &.background-red {
    background-color: red;
  }
  &.background-warning {
    background-color: yellow;
  }
}

Additional information on this can be seen here:
https://css-tricks.com/the-sass-ampersand/