sass - 整洁的新断点

Question

我正在使用整洁的波旁威士忌并尝试使用它的新断点混合，但它不起作用。我已经可以说我加载了第一个波旁威士忌，而不是 grid 和 breakpoints.scss，而不是整洁

所以我在写的时候可以看到变化：

@include media(max-width 500px) {
          @include span-columns(12); 
          background: red;
        }

但不是当我写：

$mobile: new-breakpoint(max-width 500px);
@include media($mobile) {
            @include span-columns(4);
             background: red;
          }

知道为什么吗？

score 0 · Accepted Answer

您可以将最小值和最大值用于不同的分辨率。假设你需要高达 480，那么你应该去

$mobile: new-breakpoint(max-width 480px 4);

如果你想使用平板电脑，你应该去

    $tablet: new-breakpoint(min-width 481px 8);

确保以 Min 作为上限。

score 0 · Accepted Answer

尝试new-breakpoint像这样定义声明中的列数：

$mobile: new-breakpoint(max-width 480px 4);

如果您在常规 css 之后导入响应式 css，您也可能会遇到问题。

最后，您应该将 .scss 输出更改为常规 css（未缩小），以便更好地理解代码。当您必须上传代码时，您可以更改设置并缩小 css。

2 回答 2