Is it possible to create a css class that has dynamic value? -

assume have div elements these:

<div class="mystyle-10">padding 10px</div>  <div class="mystyle-20">padding 20px</div>  <div class="mystyle-30">padding 30px</div> 

is possible create class or :

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

that replace * value set div's class?

thanks in advance!

as @bjb568 said, can achieve using css pre-processors ( sass, less, stylus .. etc )

below sass example

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

which output 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; }