How to pass parameters to css classes

by

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!

More Related Contents:

  1. How to modify the fill color of an SVG image when being served as background image?
  2. Make flex items take content width, not width of parent container
  3. Is element block level or inline level?
  4. Style input type file? [duplicate]
  5. Maintain the aspect ratio of a div with CSS
  6. How do I give text or an image a transparent background using CSS?
  7. Table with fixed header and fixed column on pure css
  8. How to display scroll bar onto a html table
  9. Why can’t I center with margin: 0 auto?
  10. How to apply CSS page-break to print a table with lots of rows?
  11. Can I use non existing CSS classes?
  12. Remove default text/placeholder present in html5 input element of type=date
  13. issue with CSS media queries(scrollbar)
  14. How to resize an image to fit in the browser window?
  15. CSS: Workaround to backdrop-filter?
  16. Inspect webkit-input-placeholder with developer tools
  17. How to create a curved speech bubble?
  18. Make an image width 100% of parent div, but not bigger than its own width
  19. How to center cards in bootstrap 4?
  20. Create line numbers on pre with CSS only
  21. HTML Div border not showing
  22. How do I assign multiple classes to one HTML element? [closed]
  23. How to center horizontally and vertically?
  24. Removing unwanted table cell borders with CSS
  25. Why is translateY(-50%) needed to center an element which is at top: 50%?
  26. Transparent scrollbar with css
  27. Make A List Item Clickable (HTML/CSS)
  28. Bootstrap row and col explanation
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment