Sassを使い始めてしばらく経っての雑感。

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の力を引き出せそう。精進あるのみです!

[Sass]@mixinで作る横並びの定義リスト

受注案件等で会社概要や役員名簿などを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をまたいだ下線を入れることができるので、けっこう気に入ってます。

[CSS3]loopで威力を発揮する隣接セレクタ。

Winwdows XPのサポート終了に伴い、積極的にCSS3を業務案件に取り入れるようになってきました。

自分が最近良く使うのは隣接セレクタです。
WordPress案件でのloopの中で、段落同士はマージンを開けて、見出しが出てきたら次の段落は間隔を近づける、というスタイルをちょくちょく使います。

記述例

h2とpが隣り合った時だけ、h2とpの間隔を狭めたい場合の書き方です。

CSS

h1, h2, p{
    margin: 20px;
}

h2 + p {
    margin-top: -15px; /*h2とpが隣り合ったときのみ摘要される*/
}

html

<h1>タイトル</h1>
<h2>サブタイトル</h2>
<p>本文</p>
<h2>サブタイトル</h2>
<p>本文</p>
<p>本文</p>
<p>本文</p>