Pass a value from HTML to CSS

Question

I was interested whether can I pass value to the css class from the html? Like this Example:

<div class="mt(5)"> Some text </div>
style {
 .mt(@mpx) {
   margin-top: @mpx px;
 }
}

I've heard that such way was possible in Less

Solution 1

No, the way you want it is impossible in either CSS or any of its supersets (like Less and others). It's always HTML that uses values from CSS and not in opposite. Thus you'll need some scripting for what you need.

You can however pass values from HTML to CSS via Custom Properties using inline styles:

.c {color:  var(--c)}
.m {margin: var(--m)}

<div class="c" style="--c: blue" >Foo</div>
<div class="m" style="--m: 0 2em">Bar</div>
<div class="c" style="--c: green">Baz</div>

Or even like this:

* {
    color:  var(--c);
    margin: var(--m);
    /* etc. */
}

<div style="--c: blue" >Foo</div>
<div style="--m: 0 2em">Bar</div>
<div style="--c: green">Baz</div>

But that method is no way different from styling by the plain vanilla method, i.e.:

<div style="color: blue"> 
... etc. 

It is essentially same ugly and non-maintainable.

---

Many people try to achieve the goal by generating hundreds of predefined classes like .mt-1, .mt-2, ... .mt-99 etc. (since it's extremely easy thing to do in a CSS-preprocessor). But it's even more ugly solution (I won't bother you with details on why it is so. You'll read about that elsewhere or learn yourself after a few projects).

Solution 2

Here is a way of doing that without the use of LESS.

1. Use CSS variables:
   Variables can be declared in the style attribute of the HTML elements.
   Then, the CSS will catch the values from the HTML and apply the correct styles.

2. Add some JavaScript:
   The values of the variables can now be dynamically modified.

⋅ ⋅ ⋅

Example of use:

• Background color is set in the HTML, (fixed)
• Padding of div1 will grow if clicked. (dynamic)

// When clicking on the div1, padding is gonna grow up.
document.getElementById("div1").onclick = function(){
  var pad = this.style.getPropertyValue("--pad");
  this.style.setProperty("--pad", parseInt(pad) + 1);
}

.divs {
  background: var(--bg);
  padding: calc(var(--pad)*5px);
}

<div id="div1" class="divs" style="--bg: #ff6; --pad: 1;">div1</div>
<div id="div2" class="divs" style="--bg: #f66; --pad: 2;">div2</div>

⋅ ⋅ ⋅

About CSS variables: The variable names must begin with -- and are case sensitive.
These variables values are applied to the element and its children.
To use it globally, you can declare it on the body tag.

Here is a link with some examples: https://www.w3schools.com/css/css3_variables.asp

Solution 3

Maybe this is what you looking for? CSS: Attr()

You can bind the value to an attribute and then get this attribute back in the css, like this:

CSS

<p data-foo="hello">world</p>

CSS

[data-foo]::before {
    content: attr(data-foo) " ";
}

Result

hello world