Question

我使用波本威士忌和整齐的设置了3个不同的断点。我已经按照苦味中的一些信息来设置变量以在媒体mixin中使用。这使得投入断点变得非常容易。

@include media($small-screen-up) {
.foo {property; value;}
}

从历史上看，我设置了断点，并且基本上包含了断点内的所有相应样式。

@media screen and (min-width: 40em) and (max-width: 53.75em) {
// all my medium screen rulesets here, yay!
  .foo {
    property: value;
   }
}

@media screen and (min-width: 53.76em) and (max-width: 80em) {
// all my large screen rulesets here, yay!
  .foo {
    property: value;
   }
}

通过设置断点的mixin和变量，我发现自己接近它的方式不同。

.foo {
  property: value;

    @include media($medium-screen-up) {
   property: value;
   }

   @include media($large-screen-up) {
   property: value;
   }
}

因此，您可以看到我在一个规则集中工作，并根据目标屏幕大小调整规则集中的样式。

这感觉很对，但也感觉很脏。

这似乎是正确的，因为无论单个区域包含什么大小，我都有所有规则。精神上追踪遗传和特异性感觉更容易。

如果感觉很脏，因为它在处理后的输出中添加了大量的@media规则。我永远不会以这种方式编写vanilla CSS。

我疯了吗？ “专业”前端开发者如何处理这个问题？（我是贸易设计师）。在复杂（企业级）应用程序中使用bourbon，neat和sass管理断点的最佳实践是什么？

使用波旁威士忌的断点和整齐的媒体（）mixin

0 个答案: