CSS/SCSS media query or class

Question

i need run the same style with media query and class. For example i need set 200px when screen is less then 500px or when have class .active. How do this in smart way? Without copy/paste code?

Not working:

@media(max-width: 500px), .active {
      width: 200px;
    }

Answer 1

In css, the , is used for grouping, when the same rule applies for several selectors.

However, media queries are not selectors. They consist of a media type and zero or more expressions to check the condition of particular media features. Thus, the , will not work in this case.

If you want to keep it dry, you can give their mixin feature a try.

E.g

@mixin smallWidth() {
    width: 200px;
}

.elem {
    &.active {
        @include smallWidth;
    }

    @media only screen and (max-width : 500px) {
        @include smallWidth;
    }
}