在 Foundation 6 中增加手机的字体大小

Question

我无法进行以下 SCSS 增加 mobiles 和 tablets 上的 font-size:

// Mobile

@include breakpoint(medium down) {
    $global-font-size: 200%;
}

生成的 CSS 文件在添加上面的代码后甚至没有改变。

Answer 1

我最后做的是将 $global-font-size 替换为 font-size:

// Mobile

html {
    @include breakpoint(medium down) {
        font-size: 200% !important;
    }
}

Answer 2

遗憾的是，无法在媒体查询中定义 SASS 变量。有关更详细的说明，请参阅 this Closed issue（以 Foundation 为例）。

不过你可以做类似的事情：

%screen-font {
    font-size: 100%;

    @media #{$medium-down} {
        font-size: 200% !important;
    }
}

html {
    @extend %screen-font;
}