【Sass】rem指定でも自動でpxを追加してくれるULTIMATE PX/REM MIXINを使ってみた

現在WordPressのテーマを作成しており、フォントサイズの単位をremで進めているのですが、IE8以下がremに対応していないということで対応するためには以下のように記述する必要があります。

h1 {
	font-size: 48px;
	font-size: 3rem;
}

font-sizeの指定は少なくないので面倒くさいなぁと思っていたところ。

“THE ULTIMATE PX/REM MIXIN”という何やらよさげな Mixin を見つけました。

THE ULTIMATE PX/REM MIXINについては以下のページからどうぞ。
http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/

特徴

・簡単に導入できる(Sass + THE ULTIMATE PX/REM MIXIN)
・px -> rem, rem -> px のどっちでも大丈夫
・使えるのはfont-sizeだけじゃない
・margin 1rem 10%;みたいな使い方もできる

Sassのインストールがまだの方は以下の記事からどうぞ。
http://matometaru.com/sass-mac/

使い方

使い方はすごく簡単です。

.scssファイルに以下のコードを貼り付けます。

html {
  font-size: 62.5%;
}

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
  $px : ();
  $rem: ();

  @each $value in $values {

    @if $value == 0 or $value == auto {
      $px : append($px , $value);
      $rem: append($rem, $value);
    }

    @else {
      $unit: unit($value);
      $val: parseInt($value);

      @if $unit == "px" {
        $px : append($px,  $value);
        $rem: append($rem, ($val / 10 + rem));
      }

      @if $unit == "rem" {
        $px : append($px,  ($val * 10 + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {
    #{$property}: $px;
  } @else {
    #{$property}: $px;
    #{$property}: $rem; 
  }
}

rem指定で.scssに書くと

textarea {
	@include rem(font-size, 1.6rem);
}

コンパイルして以下のように出力されました。

textarea {
  font-size: 16px;
  font-size: 1.6rem;
}

もちろんpx指定で書いても

textarea {
	@include rem(font-size, 16px);
}

期待通りの結果を出力してくれています。

textarea {
  font-size: 16px;
  font-size: 1.6rem;
}

一行で書けるのはうれしいですね。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD