Categories ホームページ制作(技術情報)

いまさらですがSASS (SCSS)を使ってみました。早く導入しときゃよかった (後悔)

compass最近、HTML5 / CSS3でコーディングしているとき、ベンダープレフィックスやらCSSハックやら、同じことを何度も書かないといけないので、CSSの管理に限界を感じていました。

昔から、SASSがあるのは知っていましたが、CSSをコンパイルして出力するために、CSSとは違った言語「SASS形式」で記述するのが面倒というか、事故りそうだったので、導入を断念していました。

.hogehoge
	color: red

ところが、最近、言語「SCSS形式」という記述でもOKということを知り、試しにこのサイトのCSSに導入してみました。言語「SCSS形式」とは、CSS3の記述を互換しており、拡張子を「.css」から「.scss」に変更するだけなので非常に導入が楽ちんです。

.hogehoge {
	color: red;
}

でも、唯一の弱点は、筆者は抵抗ありませんでしたが、初期インストールや設定が面倒なようです。まず、自分のパソコンにrubyを入れないといけません。また、本格的に使おうと思ったら、「Border Radius」「Box Sizing」「inline Block」「linear-gradient」などのために、mixinという関数でどのようなルールでベンダープレフィックスやらCSSハックやらを出力するのかを自分で作らないといけないので、これも面倒です (mixinが全てではなく、ネストなどのために導入でもOKですが・・・)。でも、これは、「compass」というSassのフレームワークがあり、一般的にCSS3で必要なmixinが予め準備されています。「SASS」＋「compass」の導入はおすすめです！

では、初期インストールや設定ですが、手持ちのPCをWindowsとして考えると下記のサイトがわかりやすかったです ( 当然、Macでも「SASS」＋「compass」は使えます )。

Windows PC に Ruby と Sass を導入する方法
http://www.hamashun.me/archives/1294573.html

ただし、「gem install」するとSSLエラーが出て先に進まなかったので、下記のサイトを参考にさせていただきました。

Windowsでgem installするとSSLエラーが出る場合の解決策
http://qiita.com/shimoju/items/394818b4989b94680aaf

また、Compassの本家リファレンスは下記のサイトです。

Compass Core Framework (Code Reference)
http://compass-style.org/reference/compass/

これで、環境は揃ったので、面倒だったので今まで使わなかった「rem」指定を、自作のmixinを準備して使って見たいと思います。

ベースは下記のサイトのものを使いました。

THE ULTIMATE PX/REM MIXIN
http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/

このままでは、引数に「rem」「px」「0」「auto」しか指定できないので、下記のようなものに対応できません。

 .hogehoge { margin: 1rem 4%; }

そこで、下記のように改良してみました。

/*! ---------------------------------------------------------------
 * mixin rem
 *
 * @param	string		$property
 * @param	string		$values
 * @return	void
 *
---------------------------------------------------------------- */
$rem_px_only: false !default;

@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 if type-of($value) != number {
			$px : append($px , $value);
			$rem: append($rem, $value);
		} @else {
			$unit: unit($value);
			$val: parseInt($value);

			@if $unit == "%" {
				$px : append($px , $value);
				$rem: append($rem, $value);
			}

			@if $unit == "em" {
				$px : append($px , $value);
				$rem: append($rem, $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;
		@if not $rem_px_only {
			#{$property}: $rem;
		}
	}
}

「$rem_px_only」は、CSSをWordpressのTinyMCEで使いたいときに、「@import」前にTrueにしてpx指定のみを出力するために設けました。

このmixinを使うと下記のとおりです。

.hogehoge {
	@include rem(margin, 1rem 4%);
}

.hogehoge {
	margin: 10px 4%;
	margin: 1rem 4%;
}

このmixinを使って、下記のようにDocomentのRootを10pxにしておけば、remに対応していないブラウザでもpx指定の方が有効になります。

html {
	font-size: 62.5%;	/* = 16 * 62.5% = 10px*/
}

body {
	font-size: 1em;
}

話は変わりますが、この方法ではなく、remに対応していないブラウザ向けにJavaScriptで対応させる「REM unit polyfill」というのも検証してみましたが、表示が著しく遅くなってしまいました。

最後に、ここまでremにこだわり？と思ったのですが、確かに、最終的にはpx指定なんだし、なにもremにこだわる必要はないと感じましたｗ ここまでやっといてｗ

しかしながら、「SASS」＋「compass」で、ベンダープレフィックス、CSSハック、TinyMCE向けののCSSなどをルール化できるので、おすすめです！