0

I have a regular css class defined in my .less stylesheet called pb-5 which stands for and contains padding-bottom: 5px. I use this class on elements when all they need is that one attribute and it's not worth making a whole class definition, and because it's cleaner than using the style attribute in HTML.

I am wondering if there is a way to take a parameter for my pb-5 class, so it becomes something like pb-@size. Then in my HTML I would be able to attach the class p5-[any number] and css would dynamically be generated to give it the amount of padding specified after the hyphen.

Frayt
  • 1,194
  • 2
  • 17
  • 38
  • CSS can't generate anything dynamically. – seven-phases-max Feb 27 '15 at 23:15
  • Can LESS not help with that? – Frayt Feb 27 '15 at 23:20
  • The Less compiler doesn't analyze your HTML files. Maybe you could use [the API](http://lesscss.org/#using-less-usage-in-code), but at that point, maybe you might as well be using CSSOM. – guest Feb 27 '15 at 23:24
  • Less is compiled to CSS. It's not a problem to generate all those classes for every case from 1px to 1000px (or whatever) but this is obviously is just... Well, if you still feel that some shortcode is really better than `style="padding-bottom: 5px"`, do it via `[data-pb=5]` and a tiny script. – seven-phases-max Feb 27 '15 at 23:29
  • Duplicate of [Can less.js read class names and parameters from HTML?](https://stackoverflow.com/questions/17104746/can-less-js-read-class-names-and-parameters-from-html) – seven-phases-max Nov 06 '17 at 11:23

0 Answers0