css - Groupped .className + media query? -

due effect splits page , lets resize 1 of containers. have add more styles responsive, add resizable container class representing current breakpoint (xs,sm,md,lg)

like this

if ( ui.position.left <= 480 ) { /* represent it's width, using drag function of draggable */                 clase = 'xs';             } else if ( ui.position.left <= 768 ) {                 clase = 'sm';             } else if ( ui.position.left <= 992 ) {                 clase = 'md';             } else {                 clase = 'lg';             }        $('.element').removeclass('xs sm md lg').addclass(clase); 

for example:

@media (max-width: 320px)   h2 {     font-size:12px;   } } 

and have add:

   .xs h2 {      font-size:12px    } 

is there way not have duplicate styles? (i have several blocks)

something won't work

.xs, @media (max-width:320px) {    h2 {      font-size: 12px    } } 

you can use postcss , plugin https://github.com/hail2u/node-css-mqpacker. easy , work fine. can use postcss scss.