Is it possible to create a css class with a dynamic value?

Question

Suppose I have some div elements like these:

<div class="mystyle-10">Padding 10px</div>

<div class="mystyle-20">Padding 20px</div>

<div class="mystyle-30">Padding 30px</div>

Is it possible to create a class or something like:

.mystyle-*{padding: *px; margin-left: *px; border: *px solid red; }

which will replace the * value with the value set for the div class?

Thanks in advance!

Answer 1

as @ bjb568 said, you can easily achieve this using css preprocessors (Sass, Less, Stylus .. etc.)

below is a sass example

@for $i from 1 through 5 {
    .mystyle-#{ $i * 10 } {
        $result: ( $i * 10 ) + 0px;
        padding: $result;
        margin-left: $result;
        border: $result solid red;
    }
}

which will output the following:

.mystyle-10 {
    padding: 10px;
    margin-left: 10px;
    border: 10px solid red;
}

.mystyle-20 {
    padding: 20px;
    margin-left: 20px;
    border: 20px solid red;
}

.mystyle-30 {
    padding: 30px;
    margin-left: 30px;
    border: 30px solid red;
}

.mystyle-40 {
    padding: 40px;
    margin-left: 40px;
    border: 40px solid red;
}

.mystyle-50 {
    padding: 50px;
    margin-left: 50px;
    border: 50px solid red;
}

Answer 2

You can target these elements with this selector - [class^="mystyle-"]but the rest is not possible with simple CSS.