html - 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 {
    padding: 1em;
}

.select2 {
    padding: 2em;
}

.select3 {
    padding: 3em;
}

etc.

I want to match the number with the amount I want to add, but have no idea how to go about it in CSS. Instead of actually writing them out is there a more object oriented way of doing this in CSS?

Answer 1

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.