SCSS rem,config.rbに記述して演算桁数を増やす方法

どうもです。もうすぐtwentythirteenのテーマがでてくるのかなぁ。なんて思っていますけどtwentytwelveのテーマcssでなんだろうと疑問に思い調べてみたことをちょこっと

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase: 14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
font-size: 16px
font-size: 1.142857143rem; (16 / $rembase)
line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
margin: 24px 0;
margin: 1.714285714rem 0; ( 24 / $rembase )
}

cssの先頭に書いてある記述ですが、なんですかこの桁数は?と、わざわざ計算してるはずないよねと思うわけでScssで計算しコンパイルしているだろうとmixinを作り出力したら5桁までだとしかられて、、ふむ。なぜ9桁までだしているのか疑問に思い調べてみるとブラウザにより5桁までだと9桁の時と比べておよそ3pxずれる可能性がある模様、、ふむ。それで9桁まで出力しているのかと9桁に変えたかったわけです。

config.rbに一行追加するだけ

Sass::Script::Number.precision = 9

これで9桁まで出力されるようになります。
セッティングの_○○○.scssには(_setting.scss等)

$rembase: 14;
$line-height: 24;

また、mixinの記述をしている_○○○.scss(_function.scss等)
例)

@mixin font-size($sizeValue){
  font-size: $sizeValue + px;
  font-size: ($sizeValue / $rembase ) + rem;
}
@mixin line-height($sizeValue){
  line-height: ($line-height / $sizeValue );
}
 @mixin margin-2($sizeValue,$sizeValue1){
  margin: $sizeValue + px $sizeValue1 + px;
  margin: ($sizeValue / $rembase ) + rem ($sizeValue1 / $rembase ) + rem;
}

あとは使用する箇所に

.site-header h2 {
  font-weight: normal;
  @include font-size(13);
  @include line-height(13);
  color: #fff;
    @include margin-2(10,0);
@include ts-000(2,2,0,.4);
  text-align: center;
}

出力されたcssを見ると

.site-header h2 {
  font-weight: normal;
  font-size: 13px;
  font-size: 0.928571429rem;
  line-height: 1.846153846;
  color: #fff;
  margin: 10px 0px;
  margin: 0.714285714rem 0rem;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
  text-align: center; }

remは便利だと思います。でもなんでfont-sizeの記述が2つあるのよとなるわけですけど、px指定をmixinの状態でfont-sizeの記述をpxとremの記述を出力するようにしています。pxの記述をすることでIE7/IE8の拡大表示に対応するようです。twentytwelveのcssもそうなっています。IE7/IE8にremが対応していないから、、、すごくシンプルじゃないです。その他の主要ブラウザ&モバイルブラウザはremに対応しています。

余談ですが、新しいWordPressのテーマのtwentythirteenのcssを見てみるとpx指定ですね。Normalize.cssを使っている様です。