带有媒体查询的sass代码样式

我正在对sass代码进行代码审查，并在代码中使用了媒体查询。这是一种好的做法吗？是否有更好的替代方案来编写此代码

.col-md-push-8 {
    padding-top: 1.5em;
    .btn {
        &.btn-block {
            border: none;
            background-color: $footer-button;
            margin: 1em 0 .5em;
            width: 100%;
            padding: 7px 10px;
            border-radius: 8px;
            &:hover {
                background-color: $footer-button-hover;
            }
            @media (min-width: $screen-md-min) {
                color: #025191;
                &:hover .media span p.media-heading {
                    color: #0070ca;
                }
            }
        }
    }
}

---

注意：代码仅用于说明，此处未完全显示。

如果将媒体查询放在内部或外部，则没有区别。这取决于你喜欢的风格

风格1

.some-class {
  @media (min-width: 700px) {
    background: red;
  }
}

风格2

@media (min-width: 700px) {
  .some-class {
    background: red;
  }
}

两者都将编译为：

---

我认为，如果您使用的是SASS>=3.2（以前是有bug的），那么您的方法是非常好的

要更全面地定义媒体查询断点，您可以做的一件事就是创建一个

mixin

，以便在需要的每个元素上重复使用

这样，当您必须更改最小断点、添加另一个断点或将介质

min width

更改为

max width

时，您不必到处都这样做

假设您已经定义了

$screen md min

和

$screen md mid

的一些小示例：

@mixin custom-media($size) {

    @if ($size == $small) {
         @media (min-width: $screen-md-min) { @content; }
    }
    @else if ($size == $middle) {
         @media (min-width: $screen-md-mid) { @content; }
    }
}

这样称呼它：

.btn {
    &.btn-block {
        ...
        @include custom-media($small) {
            color: #025191;
            &:hover .media span p.media-heading {
                color: #0070ca;
            }
        }
    }
}

---

Sass可以很好地处理这个问题，但这段代码将产生过度限定的选择器，而且很难做到简洁

有许多用于编写“更好的”CSS和Sass的模式，例如、、和

---

还有一大堆很好的信息可能值得一读。

我就是这样做的。看一看编译后的代码，看看它到底在做什么。很高兴这对你有帮助，我刚刚给你投了赞成票，不知道你为什么一开始就被否决了，我觉得你的问题很有趣：）没错。您也可以使用变量作为替代：

@media#{$bp-till-sm}

其中$bp-till-sm定义为

$bp-till-sm:“仅屏幕和（最大宽度：30em）”是的，你是对的，但是现在它只是在媒体查询mixin中，而且你不必连接字符串，我认为它看起来更干净了
.btn {
    &.btn-block {
        ...
        @include custom-media($small) {
            color: #025191;
            &:hover .media span p.media-heading {
                color: #0070ca;
            }
        }
    }
}