Было бы неплохо обернуть CSS-стили для разных разрешений в некоторых CSS-классах, используя less.I '

Я хотел бы сделать что-то вроде:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

В конце должно получиться что-то вроде этого:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet может выглядеть примерно так:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

Надеюсь, у кого-нибудь есть хорошая идея!