【読んだ】Web制作者のためのSassの教科書

Sass入門の定番本を読み返したので感想などをアレしました。

Web制作者のためのSassの教科書 改訂2版

Amazon

楽天

Sassは案件で使う機会があって導入して以来、すっかりその便利さにハマって、使える案件では基本的に使うようにしております。

本書は導入時からお世話になって、ちょこちょこ参照してたけど、もっかい全編を読みなおしてみたのでちょっとまとめを。

難易度

• 最低限CSSが普通に扱えるなら平易。
• なんでもいいので、プログラミング言語も何か触っていないと変数や関数の考え方がスッと入らないかも。
• ただしSassのインストールの部分は、もしかしたらつまづく人もいるかも。自分の場合は本書を読む前に以下の記事で済ませていたので問題ありませんでした。 これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG

感想

1回目読んだ時

• 導入は上記の通り事前に済ませていたのでパス。
• 基本的なSassの使い方（3章～4章）を中心に学習。超分かり易かったのですぐに基本はマスターできた。
• 5章以降は読んだだけではすぐ活かせなかった。

読み返した時

• Sassの機能を全然使いこなせてなかったなー、と感じた。やはりこういうのは何回も読み返すべきですなー。
• 3章～4章の基本的な使い方も、読み返す価値あった。使ってなくて損してた関数とかちょこちょこあった。
• 5章以降の実践編は、ちょっとSassを使ってから改めて読むことでより参考になった。

使ってなくて損してた系のこまごましたのは自分のためのメモとして下に列挙しましたが、そもそも今の自分のSassファイルにはextendやmixinで運用した方が便利になる部分が多くて、美しさに欠けるなという感じ。

そしてCompassは、目玉機能のスプライトからこまごました関数に至るまで、全体的に機能を使えてなかったのでちゃんと学んでおこうと思いました。なおclearfixについては以下も参照しておくと幅が広がって幸せを感じる。

使ってなくて損してたシリーズ

親セレクタの参照

こういうの↓

#side {
	width: 240px;
	body.top & {
		width: 300px;
	}
}

こういうの↓は使っているけど、下のと違って上のは構造的にネストをさかのぼるので、一見美しくない気がしてスルーしてたが改めてみると運用面では便利かも。

a {
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

@extend 専用のプレースホルダーセレクタ

%で始まるプレースホルダーセレクタはコンパイルされない。

%boxBase {
	padding: 15px;
	border: 1px solid #999;
}

// プレースホルダーセレクタを継承
.item {
	@extend %boxBase;
	margin-bottom: 20px;
}

rgba()関数

rgbaで透過させたいときに色指定をHSLからRGBに直さなくてもそのままでいける

body {
	background: rgba(#6a5468, 0.3);
}

インターポレーションで変数に入れたパスを使う

$IMG_PATH: '../common/images/';

#main {
	background: url(#{$IMG_PATH}main.png);
}

$border: 1px;
.item {
	width: calc(100% - #{$border * 2});
}