css3 - How to prevent CSS code duplication inside media queries? -

i trying develop own grid system. first attempt maybe missing something. here css:

.column-1 {   width: 6.86666666667%; }  .column-2 {   width: 15.3333333333%; }  // more such columns  @media screen , (max-width: 768px) {   .column-s-1 {     width: 6.86666666667%;   }   .column-s-2 {     width: 15.3333333333%;   } } 

as can see values duplicated class names different. there way can avoid duplication because become more , more complex each additional class.

you can avoid of duplication grouping selectors:

.column-1, .column-s-1 {   width: 6.86666666667%; }  .column-2, .column-s-2 {   width: 15.3333333333%; }  // more such columns @media screen , (max-width: 768px) {   .column-s-1 {     /* properties characteristic width*/   } } 

another option use less or sass