How to Pass Parameters to CSS Classes

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!

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?

How do I pass a variable to a CSS file?

Use class when you wish to apply a group of styles to many HTML elements, and unique id selectors for styling only a single element. You can also utilize CSS Variables for reusable values, there are a few ways to go about doing so. In general, you declare a custom variable by using a custom property name that begins with a double hyphen --, and a property value that can be any valid CSS value. Using var() allows us to insert the value of custom property (variable). If the custom property should be more than word, separate each word with a hyphen (kebab case).

Target the :root element and define variables:

:root {
  --my-cool-prop: #f06;
}

.my-selector {
  color: var(--my-cool-prop);
}

Create the custom property inside the selector:

.some-selector {
  --some-prop: 16px;
  --some-other-prop: blue;
  font-size: var(--some-prop);
  background-color: var(--some-other-prop);
}

So lets say you have four different HTML pages, you can use a single stylesheet (or multiple if you have a bunch of CSS and opt for a more modular approach) to define some custom variables and use them in the selectors you wish to style. Remember if you define a variable in style.css and try using it in another CSS file other-style.css it won't be available. When using var() you can also define multiple fallback values if the given variable isn't defined.

:root {
  --my-cool-prop: #f06;
}

.my-selector {
  color: var(--my-cool-prop, #000); /* black if --my-cool-prop is undefined */
}

.some-selector {
  --some-prop: #fff;
  --some-other-prop: blue;
  color: var(--some-prop, red); /* red if --some-prop is undefined */
  background-color: var(--some-other-prop, green); /* green if --some-other-prop is undefined */
}

<body>
  <h1 class="my-selector">Some title</h1>
  <div class="some-selector">
    <h2>Some other title</h2>
  </div>
</body>

Can I pass a parameter to a CSS class?

Try this

<div class="class-test">
       .....
       // here width should be 266px
  </div>

  <div class="class-test testclass" >
       .....
       // here width should be 120px
  </div>

CSS

.class-test.testclass 
{ 
width: 120px;
}

Fiddle: https://jsfiddle.net/1h1w8202/

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

How do you pass a variable to SCSS/CSS from HTML's class name?

You can use a mixin to generate modifier classes in SASS:

@mixin add-color($argument) {
  $string: unquote($argument);

  &--#{$string} {
    color: unquote('#' + $argument);
  }
}

example:

.custom-color {
  @include add-color(404145);
  @include add-color(ff0000);
}

output in CSS:

.custom-color--404145 {
  color: #404145;
}

.custom-color--ff0000 {
  color: #ff0000;
}

Read more about it here:
Generate All Your Utility Classes with Sass Maps

How to Pass Parameters to CSS Classes