a solution to control font-size relatively with media queries in Sass

SCSS で media queries を使いながら、相対的に font-size を扱うよさ気な方法を思いついた。

I just conceived a good solution to control font-size relatively with media queries in Sass.

settings

At first, you can change…

• base font sizes, which is referenced by reading text like

  and othres…

• brakepoints for mediaqueries

and here is the settings and mixins

$font-size-desktop     : 12px; // base font size for desktop
$font-size-middlescreen: 14px; // base font size for tablet
$font-size-smallscreen : 16px; // base font size for smartphone

$breakpoint-desktop     : 1024px;
$breakpoint-middlescreen: 768px;
$breakpoint-smallscreen : 320px;

// do not change below this line ---

$_basefontsize: $font-size-desktop;

@function parseInt ( $x ) {
  @return $x / ( 1 + $x - $x );
}

@function fs ( $relativeSize ) {
  @return $_basefontsize + ( $relativeSize * 2 );
}

@mixin max-screen( $res ) {
  @media screen and ( max-width: $res ) {
    @if parseInt( $res ) < parseInt( $breakpoint-desktop ) {
      $_basefontsize: $font-size-desktop;
    }
    @if parseInt( $res ) < parseInt( $breakpoint-middlescreen ) {
      $_basefontsize: $font-size-middlescreen;
    }
    @if parseInt( $res ) < parseInt( $breakpoint-smallscreen ) {
      $_basefontsize: $font-size-smallscreen;
    }
    @content;
    $_basefontsize: $font-size-desktop;
  }
}

SCSS code example

And then, write some code in scss, with fs mixin and max-screen mixin. here is a example.

.myModule1 {
  font-size: fs( 0 );
  @include max-screen( $breakpoint-smallscreen ) {
    font-size: fs( 0 );
  }
}

.myModule2 {
  font-size: fs( +1 );
  @include max-screen( $breakpoint-smallscreen ) {
    font-size: fs( +1 );
  }
}

.myModule3 {
  font-size: fs( +2 );
    @include max-screen( $breakpoint-smallscreen ) {
      font-size: fs( +2 );
    }
  .myModule3__elm{
    font-size: fs( 0 );
    @include max-screen( $breakpoint-smallscreen ) {
      font-size: fs( 0 );
    }
  }
}

output

after compilation, you will get css code below

.myModule1 {
  font-size: 12px; }
  @media screen and (max-width: 320px) {
    .myModule1 {
      font-size: 14px; } }

.myModule2 {
  font-size: 14px; }
  @media screen and (max-width: 320px) {
    .myModule2 {
      font-size: 16px; } }

.myModule3 {
  font-size: 16px; }
  @media screen and (max-width: 320px) {
    .myModule3 {
      font-size: 18px; } }
  .myModule3 .myModule3__elm {
    font-size: 12px; }
    @media screen and (max-width: 320px) {
      .myModule3 .myModule3__elm {
        font-size: 14px; } }