css - 在 Prepros 中使用 sass 断点

Question

有什么方法可以使用

“断点”

内脏

“预科”

?

Answer 1

是的。这是一个例子：

@mixin breakpoint($point) {
    @if $point == xs {
        @media (min-width: 420px) { @content; }
    } @else if $point == sm {
        @media (min-width: 640px) { @content; }
    } @else if $point == md {
        @media (min-width: 960px)  { @content; }
    }
}

...根据需要指定任意数量。然后使用断点就这么简单：

.my-class {
    color: red;

    @include breakpoint(md) {
        color: blue;
    }

}

在此示例.my-class中，颜色将为红色，除非视口至少为 960 像素宽，在这种情况下，.my-class颜色将为蓝色。

我希望这有帮助。

Answer 2

您可以将断点写入不同的文件，并将该文件命名为“_breakpoint.scss”

在您的主 app.scss 中，您可以使用导入功能调用您的依赖文件。所以在你的 app.scss 你会写： -

app.scss @import "_breakpoint.scss";

现在您可以在 _breakpoint.scss 文件中定义的文件中使用断点。

希望清楚！！