How to Pass a Parameter to a CSS Class Using Less

How to pass parameters to css classes

For anyone stumbling across this in 2018, whilst not fully supported CSS variables now give you the ability to pass a variable directly into your class.

<div class="round" style="--radius: 100%;"></div>
<style>
  .round {
    display: block;
    height: 40px;
    width: 40px;
    border: 1px solid #BADA55;
    border-radius: var(--radius);
  }
</style>

You can also define root variables and pass them in as well

<div class="round" style="--radius: var(--rad-50);"></div>
<style>
  :root {
    --rad-0: 0%;
    --rad-50: 50%;
    --rad-100: 100%;
  }
  .round {
    display: block;
    height: 40px;
    width: 40px;
    border: 1px solid #BADA55;
    border-radius: var(--radius);
  }
</style>

This is also scoped to the element as well. If you set the --radius in one element is wont effect another element. Pretty jazzy right!

How to pass a LESS variable into a class name

Simply you can do it this way:

// Using variables
.one-@{columns}-inner {
    color: black;
}

How to pass parameters (for real) to a CSS class like we do in Javascript?

There is no way to do what you're looking for... Plus, what you want isn't the right way to write css: css is a static language, everything that needs to be dynamic should be achieved in javascript.

In order to achieve that, but statically, is to use a css preprocessor like sass:

@each $width in (5, 10, 15, 20) {
.clWidth-#{$width} { width: #{$width}px; }
}


Can less.js read class names and parameters from HTML?

LESS cannot easily read a parameter from the HTML, as LESS is a preprocessor (it processes the CSS before anything is presented in HTML). However, you can prebuild classes that will essentially do the same thing. You just need to set a practical limit to how many columns wide something might be. My example here is modest (5 columns max), but easily changed with the variable parameter. It uses a loop structure in LESS to build up to the maximum number of column classes you desire:

LESS

@numColClasses: 5;

.buildColumnClasses(@colNum) when (@colNum =< @numColClasses) {
  .column@{colNum} {
      .column(@colNum);
  }
  .buildColumnClasses((@colNum + 1));
}
//end loop
.buildColumnClasses(@colNum) when (@colNum > @numColClasses) {}

//start loop
.buildColumnClasses(1);

(Pseudo) CSS Output

.column1 {
  code-for-columns-at: 1 wide;
}
.column2 {
  code-for-columns-at: 2 wide;
}
.column3 {
  code-for-columns-at: 3 wide;
}
.column4 {
  code-for-columns-at: 4 wide;
}
.column5 {
  code-for-columns-at: 5 wide;
}

Use in HTML much like you were noting

<div class="column5"> 5 column wide</div>

Possible to pass arguments to CSS classes?

No. But you can generate a reasonable number of pre-built classes:

.top-margin-2 {
    margin-top: 2em;
}
.top-margin-5 {
    margin-top: 5em;
}

Then you can generate your HTML with class="top-margin-#{margin}"

This is not usually a good thing, but if you really need it, it's possible. I urge you though to reconsider and ask what you really want; CSS classes should be semantically meaningful, otherwise you might as well directly apply the CSS on the elements' style attribute. What does 2em mean to you? What is 5em?

---

Related Topics