CSS: defining a media query within a single class

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

This way we can define desktop and mobile CSS inside the class.

I tried this but it doesn't seem to work

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

Answer 1

You need to do the following:

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

If you want to target your desktop, you can use:

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

I just notice that you are 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

CSS - . . - , , .

SASS LESS . , , , CSS , . ( CSS sass/less , .)

, - :

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

CSS ( @media ) SASS/LESS ( , ).

, :

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

Answer 3

You definitely need to apply several types of multimedia queries. The code is not magic, and CSS requires certain parameters for those kinds of requests.

You can use JS, but this is not recommended based on your use.

Here is a CSS solution

@media all and (minmax-width: 0px) and (min-width: 320px), (max-width: 320px) 
    { Insert Code };
}'

Answer 4

Working:

.column-1-3 {
  width: 33.3333%;
  @media (max-width: 600px) {
    width: 100%;
  }
}

http://css-tricks.com/media-queries-sass-3-2-and-codekit/