CSS: define media query within one class [closed]

Question

Is it possible to write something like

.global-container   margin-top: 60px   background-image: $image-bg   @media(max-width: 767px)     margin-top: 0     background-image: none 

So we can define the desktop and mobile css within a class

I've tried this, but it seems not working

UPDATE: This is actually working: http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Answer 1

You should do like this:

@media all and (max-width: 767px) {     .global-container {         margin-top: 0;         background-image: none;     } } 

If you want to target desktop, you can use:

@media (min-width:1025px) {      .global-container {         margin-top: 0;         background-image: none;     } } 

I just notice you're using SASS, you can do like this:

.global-container {     margin-top: 60px;     background-image: $image-bg;     @media (max-width: 767px) {         /* Your mobile styles here */     }     @media (min-width:1025px) {         /* Your desktop styles here */     }  } 

Answer 2

In plain CSS, the answer is no. You can't. Media queries should always be an outer shell, encasing the inside to be applied under that condition.

In SASS and LESS, however, it's fully valid. Any converter that supports nested curly brackets should be able to move the media query to the outside, therefore allowing CSS to work as said above. (You can check the output CSS after compiling sass/less file and see them do it.)

So, if you have something like this:

body {     background:green;     @media (min-width:1000px) {background:red;} } 

The screen will be green in CSS (because it ignores that weird @media thing inside body style definition block) and red in SASS/LESS (because it gets what you'd actually like to see).

To be exact, preprocessors will understand the snippet above as:

body {   background: green; } @media (min-width: 1000px) {   body {     background: red;   } }