4

我使用波旁威士忌和整洁设置了 3 个不同的断点。我遵循了一些苦涩的信息来设置变量以在媒体混合中使用。这使得插入断点变得非常容易。

@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 规则。我永远不会那样写香草CSS。

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

4

0 回答 0