0

好的，所以我有一个项目，我使用 SASS 使用 gulp 编译成 CSS，我使用 Bourbon 和 Neat 来构建网格系统。我觉得很奇怪，以下内容还没有响应。

翡翠模板：

article.fleet
        .container
            .row
                .image-container
                    img(src="images/image.svg")
                .text-container
                    p text

SASS 为它

.container
  +outer-container
  p
    color: #493F3F
    line-height: $font-size-base * $line-height-lg
    article.story
        height: 450px
        p
            +span-columns(6)

然后我尝试通过设置断点来测试$mobile: @mixin new-breakpoint(max-width 480px 4)

我发现当我使用@include media($mobile)编译后的 CSS 的输出是这样的：

@media screen and (min-width: (+max-width) 480px 4) {
      section.hero h1 {
        font-size: 18px; }

为什么它输出(min-width: (+max-width) 480px 4)......整洁有什么问题吗？

4

1 回答 1

1

您正在创建错误的断点。新断点 mixin 不需要@mixin声明。因此，您必须将其更改为：

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

我没有在你的代码中尝试它，但我认为它有效。

干杯。

于 2014-07-23T15:56:59.183 回答