pxをremに変換するSassの関数を追加

[manabuyasuda]

remのベースフォントサイズはブレイクポイントと連動して変更できるようにしておく。例えば、

$_font-size: (
  'sm': 15px,
  'md': 16px,
) !default;

@function _rem($px, $key: 'sm') {
  $value: map-get($_font-size, $key);
  @return ($px / $value) * 1rem;
}

html {
  font-size: map-get($_font-size, sm);
  @media (min-width: 768) {
    font-size: map-get($_font-size, md);
  }
}

.foo {
  font-size: _rem(15px);
  margin-bottom: _rem(30px);
  @media (min-width: 768px) {
    font-size: _rem(16px, md);
    margin-bottom: _rem(32px, md);
  }
}

変換後、

html {
  font-size: 15px;
}
@media (min-width: 768) {
  html {
    font-size: 16px;
  }
}

.foo {
  font-size: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .foo {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
}

[manabuyasuda]

@warnはひとまず記述しない。

pxのフォールバックはIE8対応がほぼ無いことを考えると不要。フォールバックを加えると@mixinになり、ショートハンドで書くことができなくなるデメリットもある。

[manabuyasuda]

pxからemに変換する関数も必要かも。

@function _em($self, $parent) {
  @return ($self / $parent) * 1em;
}