How to prevent CSS code duplication inside media queries?

Question

I am trying to develop my own grid system. This is my first attempt so maybe I am missing something. Here is my CSS:

.column-1 {
  width: 6.86666666667%;
}

.column-2 {
  width: 15.3333333333%;
}

// More such columns

@media only screen and (max-width: 768px) {
  .column-s-1 {
    width: 6.86666666667%;
  }
  .column-s-2 {
    width: 15.3333333333%;
  }
}

As you can see the values are duplicated but class names are different. Is there any way I can avoid this duplication because it will become more and more complex with each additional class.

Answer 1

You can avoid some of duplication by grouping selectors:

.column-1,
.column-s-1 {
  width: 6.86666666667%;
}

.column-2,
.column-s-2 {
  width: 15.3333333333%;
}

// More such columns
@media only screen and (max-width: 768px) {
  .column-s-1 {
    /* only properties characteristic for this width*/
  }
}

Another option is to use LESS or SASS