在 Prepros 中使用 sass 断点答案

【问题标题】：Using sass breakpoint with Prepros在 Prepros 中使用 sass 断点
【发布时间】：2019-12-05 14:01:11
【问题描述】：

有什么方法可以使用

“breakpoint”

对于 sass 内

“预科”

【问题讨论】：

标签： css sass breakpoints compass prepros

【解决方案1】：

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

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

app.scss @import "_breakpoint.scss";

现在你可以在这个文件中使用你在 _breakpoint.scss 文件中定义的断点了。

希望清楚！！

【讨论】：

【解决方案2】：

是的。这是一个例子：

@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 颜色将为蓝色。

我希望这会有所帮助。

【讨论】：