Increase font size for mobiles in Foundation 6

Question

I'm unable to make the following SCSS increase the font-size on mobiles and tablets:

// Mobile

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

The generated CSS files isn't even changed after adding the code above.

Answer 1

What I ended up doing is to replace $global-font-size with font-size:

// Mobile

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

Answer 2

Unfortunately it's not possible to define a SASS variable inside a media query. See this Closed issue for a more detailed description (has Foundation as an example).

You can do a similar kind of thing like this though:

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

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

html {
    @extend %screen-font;
}