Question

我正在对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;
                }
            }
        }
    }
}

注意：该代码仅供参考，并未在此处完整显示。

Answer 1

我认为，如果您使用SASS＆gt; = 3.2（之前有错误），那么您的方法就完全没问题了。

您可以更全面地定义媒体查询断点的一件事是为此目的创建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;
            }
        }
    }
}

Answer 2

如果您将Media Query放在内部或外部，则没有区别。它只取决于你喜欢的风格。

样式1

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

样式2

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

两者都将编译为：

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

Answer 3

Sass处理这个问题很好，但是这个代码会产生过于合格的选择器，并且很难简洁。

有很多用于编写“更好”的CSS和Sass的模式，例如BEM，OOCSS，OOCSS + Sass和SMACSS。

关于Media Queries in Sass的一些重要信息可能值得一读。

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

3 个答案: