カテゴリー: Sass

見出し要素は出現頻度が高く、無計画にcssを記述していると乱雑になりやすいのでひとまとめに管理する記述する方法を考えてみました。タイトル通りSassのfor文とif文を使います。

Sass

body{

	$reduce : 0.2; //フォントサイズを0.2ずつ源算するための値
	$fontSize : 3 + $reduce; //フォントサイズの初期値

	//$valueに1ずつ加算して代入し、6になるまで繰り返す  
	@for $value from 1 through 6 {

		h#{$value}{ //#{}を使用して見出しセレクタを作成

			//フォントサイズを再設定
			$fontSize: $fontSize - $reduce; //0.2ずつ源算
			font-size: $fontSize + rem;

			//h2要素のcssを設定
			@if $value == 2 {
				color: red;
			}

			//h3要素のcssを設定
			@if $value == 3 {
				color: blue;
			}

			//class付きh4要素にcssを設定
			@if $value == 4 {
				&.h4-custom {
					border-bottom: 1px solid #CCCCCC;
				}
			}

		}

	}

}

＠forでh1からh6までのフォントサイズを調整し、@ifで条件分岐して見出しごとのスタイルを設定しています。より複雑なスタイルを施したい場合は別途@mixinを作って@includeすればさらに管理しやすくなりますね。

Sassの力をフルに引き出すには、もっと根っこからCSSのコーディング方法を変える必要がある！と思い、BEMを取り入れたコーディングを始めました。

Sassだけに頼っても、生産性は上がらない！

Sassを使い始めたものの、思ったほど効率が上がらない。なにか引っかかっておりました。いろいろ考えた結果、Sassがどうとかじゃなくて、自分のコーディングスタイルをもっと見なおした方がいいという結論に。

「CSS設計の教科書」を読む

そんな折、「Web制作者のためのCSS設計の教科書」という書籍が発売されていたので購入。今の自分にぴったり。早速読んでみました。

冒頭で、破綻しやすいコーディング例の紹介がありました。その中の一つに、IDセレクタを起点にして、その子要素のhtmlにスタイルを当てるやり方が解説されていて、まさに自分が当てはまっていました。

この記法はhtmlは汚れずらいけど、htmlが変わるとスタイルの修正がかなり大変。また、使い回したいと思っても、IDセレクタ起点なので、他の箇所で使えなかったり。

うーむ、確かにその通り。

で、どうしたらいいかというと「classを活用」したり、「OOCSS(オブジェクト指向CSS)」を取り入れる、という解決方法が「CSS設計の教科書」で解説されていました。

OOCSSは知ってはいたものの、htmlにclassセレクタを記述するのが冗長に思えて避けていました。htmlが汚くなることに抵抗がありました。

でも、そのかわり今のままだとCSSが汚い！生産性低い！このままだと何も変わらない！ってことで、恐る恐るOOCSSに取り組むことに。

OOCSSにもいろいろ種類があるようで、「SMACSS」、「BEM」、「MCSS」、「FLOCSS」など命名規則や記法、構造にそれぞれ特性があります。

自分はとりあえず「BEM」のルールでやってみることにしました。

BEMに取り組む

BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。

BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号

とあります。Blockという要素の起点となるclassがあり、それに対してElementというclass、Elementのバリエーションとしてmodifierと呼ばれるclassが存在します。(詳しくは「CSS設計の教科書」をぜひ。)

このBEMの命名規則にのっとってclassを作り、html要素に付与していくわけです。

htmlに依存しないCSS

classの数がとても増えるので、IDセレクタを起点にスタイリングするより手間がかかります。でも、やってみてわかりました。この方法は、とても良かったです。

html要素を変更しても、cssを修正しなくてよいのはすごく楽でした。最初のclass付けに手間がかかったとしても、修正の労力がぐっと減ることの方がメリットがはるかに大きい。class名に意味を持たせて付けてやれば、思ったより煩雑にならない。

また、IDセレクタをやめてclassでスタイルを作るので、当然使いまわししやすくなりました。IDセレクタ直下のhtml要素にスタイルを当てる今までのやり方とは感覚が全く違います。

そしてこれこそSassの出番。@mixinや@extendが力を発揮します。むしろこれでSassを使う本当の意味が出てきたと感じました。(これも、もっと早くやればよかった！)

最後に

いろいろ書いてきましたが、まだまだBEMの記法を有効活用できていません。つい「IDセレクタ起点」風の記述をしてしまうことも多いです。

もっとスマートにCSSを記述できるよう、BEM修行はまだまだ続きます。

Sassを使い始めてしばらく経ちました。とは言ってもCompassはまだ使っておらず、ごくごく基本的な範囲でSassを使っていて思ったことを書いてみます。

セレクタのネストし過ぎは禁物

便利だな~と思ってネストしまくると、うん、とても見づらいです(苦笑)。例えば#mainなどIDセレクタを使ってスタイルを区切っていくと、そのID内のスタイルを書くときはずっとインデントしているわけで、それはちょっとう～んな感じ。
Media Queriesを使うとさらにネストが深くなりますし。

ただ、それはIDセレクタに依存しているコーディングルールの方に問題があるのかも。最初から階層があまり深くないようにhtmlの構造を設計し、OOCSSなどをうまく取り入れてバランスを取るのが良いのかもしれません。

ただ、ある程度慣れてルールが決まってくると、きれいなコードが書けるようになるのは間違いないと思います。これからもガシガシ使っていこうと思います。

Media Queriesと@mixin

Sassでショックだったのが、Media Queriesを使うと@extendが使えないということ。セレクタをグループ化する機能なのでそれもしかたないのですが、けっこうがっかり。@mixinで対応するしかありません。

しかし、@mixinを使う場面とそうでない場面を考え直す必要もあるとひらめきました。それらの機能を使いすぎるとcssが荒れます。それよりも、明示的にclassをhtmlに与える方がきれいなコードになる場合も多いというのが実感です。

変数と@inmport

Sassの醍醐味はコードの「再利用」だと思うのですが、再利用するということはスタイルをコンポーネント化する、ということに繋がると思います。

サイト全体のレイアウトや、リンクカラー、フォントファミリなどの基本的なスタイルに対応する値を変数として入力するSassファイルと、その受け手となるコンポーネントSassファイルを用意し、組み合せて使っています。

この2つを@inmportとすると、コンパイル後のCSSとしてひとつに合体できるので、Sassファイルを汚染すること無く使いまわせるようになり、とっても楽になりました。

これが極まった先に見えるのはCSSフレームワーク。Sass版のTwitterBootstrapなんかもあるようですし、あぁ、Compassもフレームワークですね。使ってみたいです。

制御構造は案件とスキル次第で可能性を感じる。が…

ループ処理などプログラミング言語っぽい機能も提供しているSassですが、このあたりはまだスキルが追いついていません。もう少し勉強が必要そうです(^^;)

もうSassなしでコーディイングはしたくない。しかし、真の力を引き出すにはまだまだ勉強が必要

見出しが全てを述べている感じですが、まだまだ使いこなせている感じはしないです。根本的なCSS、その他コーディング全般の底上げをして、はじめてSassの力を引き出せそう。精進あるのみです！

受注案件等で会社概要や役員名簿などをWEBサイトに掲載するときに、定義リストを横並びにして使うことがけっこうあるのですが、引数付きのmixinを利用するとスタイルの使い回しが楽なのでサンプルコードを掲載してみます。

Sass mixin

引数の意図は、
$dt_w → dtの幅。中に入れたい文字数やデザインにあわせて調整する。
$dd_pl → ddの左側のパディング。dtの幅+アルファ分余白を取る。
という感じです。

@mixin parallel_dt_dd($dt_w,$dd_pl) {
	dt{
		float:left;
		width: $dt_w;
	}
	dd{
		margin-left: 0;
		padding-left: $dd_pl;
	}
}

//必要な箇所で必要な引数を入れて使います。
dl {
	@include parallel_dt_dd(11em,12em);
}

コンパイル後

dl dt {
	float: left;
	width: 11em;
}

dl dd {
	margin-left: 0;
	padding-left: 12em;
}

ddにborder-bottomを設定すると、dtとddをまたいだ下線を入れることができるので、けっこう気に入ってます。