在奇点 gs 中编写断点的正确方法是什么？

Question

我对此表示怀疑，所以我想知道这样做是否更好：

.class {

    @include breakpoint($desk) {

    }
}

或相反：

@include breakpoint($desk) {

.class {

    }
}

我使用第二个，因为我认为这样我将所有类或 ID 分组到一个断点中，但我不确定。

Answer 1

在 Sass 中，媒体查询 bubble 直到嵌套的顶部，因此两个示例生成相同的 CSS。

第二种方法允许您将多个声明分组到一个媒体查询下，但您应该只在这些声明彼此相邻出现时才使用它。有一种观点认为你不应该构建你的代码，以便它产生更少的媒体查询。相反，您应该按功能构建代码，即。 e.代码描述了哪些页面元素。媒体查询的应用范围应尽可能小。服务器的 gzip 压缩会处理重复代码。

但这只是个人喜好问题，两个例子都是有效且可接受的。