Can I programmatically determine a property value for a series of CSS classes?

Question

I need help understanding an easier way to write this.

I have classes that have a number between 1-100 at the end of it. So for example:

.select1 {
         


        

Answer 1

You can't do it with CSS. And you shouldn't do it this way. It's the same as inline styles:

<div style="padding: 1em"></div>
<div style="padding: 2em"></div>
<div style="padding: 3em"></div>
...

Bad way. You should separate your HTML layout and CSS.

Answer 2

You could use a CSS Pre-processor like SASS or LESS, with variables.

For example, with SASS you could do a for loop:

$class-slug: select !default

@for $i from 1 through 100
  .#{$class-slug}-#{$i}
    padding: $i + 0em

Which would output what you're looking for.

It's not a pure CSS solution, but it beats doing each one by hand. Otherwise you could also do this with Javascript, but that's not ideal.