如果可能，如何成功实现嵌套的媒体查询

Question

目前，我有两个媒体查询，在几个设置之外并没有太大差异。

电流：

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

正如您所看到的，两个查询都在查看screen。我不希望能够为媒体查询的每个部分做一个疯狂的嵌套语句，但如果我可以做一些让scss在上下文中可读的东西，而不是将媒体查询放在我的网站底部，那就太好了。 scss文件（这会包含所有内容等）。

期待做类似的事情，也许并不完全像。我VS2012的SCSS实现并不是这样的，因此我要问：

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

    }

    & and (max-width: 500px){

    }
}

Answer 1

你只需将它们嵌套在任何其他选择器中就可以嵌套：

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

    }

    @media (max-width: 500px) {

    }
}