Nesting MediaQueries

[Goldbishop]

Originally asked this on SO (http://stackoverflow.com/q/23032223/659246), with few responses.

So basically, i am trying to figure out the best way to get this done, without overloading my SCSS file with a bunch of out focus coding.

Current Implementation:

@media screen and (min-width:501px){
    div {
        &.footer-container {
            text-align:center;

            ul {
                li {
                    display:inline;

                    &.divider {
                        border-right: solid 1px black;
                        border-left:solid 1px black;
                        margin-right:4px;
                        margin-left:4px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:500px){
    div {
        &.footer-container {
            ul {
                li {
                    &.divider {
                        border-top:solid 1px black ;
                        border-bottom: solid 1px black;
                    }
                }
            }
        }
    }
}

I was looking at doing something like this:

@media screen {
    & and (min-width: 501px){

    }

    & and (max-width: 500px){

    }
}

But obviously, will not be parsed by the VS2012/Ruby Parser.

With that knowledge, how would i go about getting the same result without having code that is way out of focus of the selectors i am using? Eventually i will have Media Queries for smaller and larger screen sizes for other elements and would like to have those media queries at least focused in the location where they would be more descriptive.

[jlong]

There are a couple of great libraries in Sass for dealing with media queries in a more programatic way.

For instance Breakpoint:

$small: min-width 300px;
$medium: min-width 500px;
$wide: min-width 1200px; 

.hello::before {
    @include breakpoint($small) { content: "Hello small world!"; }
    @include breakpoint($small) { content: "Hello medium world!"; }
    @include breakpoint($small) { content: "Hello large world!"; }
}