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;
    }

choz · Answer 1 · 2016-10-31T09:19:28.360

16

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;
    }
}

edited Oct 31 '16 at 09:19

answered Oct 31 '16 at 08:48

choz

17,242
4
53
73

2

That's **and**, the question says **or** – Quentin Oct 31 '16 at 08:49

score 14 · Answer 2 · answered Oct 10 '18 at 11:45

14

Mixins are a simple solution, but they duplicate the CSS in the final output. A better solution may be to inverse the logic entirely.

In boolean algebra, de Morgan's theorem states that A || B is the same as !(A && B). In your case, this means thinking about your problem in a mobile-first way:

.elem {
  width: 200px;

  @media (min-width: 501px) {
    &:not(.active) {
      width: auto; // or whatever
    }
  }
}

answered Oct 10 '18 at 11:45

Axel

867
1
8
24

This is what I was trying to think. Thanks. – So You're A Waffle Man Nov 14 '19 at 12:31

score 3 · Answer 3 · answered Oct 31 '16 at 08:48

CSS provides no means to say "When a media query OR a given class applies".

With plain CSS you can only:

.active {
    width: 200px;
}

@media(max-width: 500px) {
      * {
          width: 200px;
      }
}

with SASS you can use a mixin, but it isn't really efficient for a single rule like that:

@mixin my-width {
    width: 200px;
}

.active {
    @include my-width;
}

@media(max-width: 500px) {
      * {
          @include my-width;
      }
}

score -4 · Answer 4 · answered Oct 31 '16 at 08:46

-4

Try this one.

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

answered Oct 31 '16 at 08:46

Undecided Dev

840
6
16

could you explain what "only screen" accomplishes? :) – jogoe Oct 31 '16 at 08:48
5

That's **and**, the question says **or** – Quentin Oct 31 '16 at 08:48
@Nelson Tan, thanks, but this is not works for my. I need OR query. Now add width only when have .active class. – lolalola Oct 31 '16 at 08:49
@jogoe Check this link http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries – Undecided Dev Oct 31 '16 at 08:50

score -4 · Answer 5 · answered Oct 31 '16 at 08:47

-4

you have to declare the media and your class separated:

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

answered Oct 31 '16 at 08:47

gerardet46

76
1
9

4

That's **and**, the question says **or** – Quentin Oct 31 '16 at 08:48

CSS/SCSS media query or class

5 Answers5