ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

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

2016年11月7日

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

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

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

難易度

感想

1回目読んだ時

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

読み返した時

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

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

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

Sass・Compass clearfixの使い分け

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

親セレクタの参照

こういうの↓

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

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

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

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

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

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

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

rgba()関数

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

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

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

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

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

インターポレーションでcalcに変数を使う

無敵を感じる

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

今後のSassのこと

GUIが長らく更新されていないよ問題

Koalaの更新は約1年ないが、どうも他のGUIも似たような状態ぽい。

これは気にしておくべきではないかと思っていて、現状自分もGUIに頼りきっている状態だけど、黒い画面からも普通に操作できるようにしといた方がよさげ。Sassのバージョンアップに対応できてなかったりとか。本書にも、コラムで「GUIだけでなく黒い画面も使えるようにしときなはれ(意訳)」と書いてある。もしくは下の資料にあるように、glupとかに切り替えていくか。使ったことないけど。

最新の環境とか

読み返すタイミングでこういうのも見つけた↓

イマドキのコーダー環境構築2016

これからちゃんと使おうと思ったCompassは終焉しているらしい。。。が、目下のところ使いそうなのでちゃんと覚えつつ、依存度の高いものは乗り換えた時にもスムーズに移行できるように取捨選択していく方向でいきたい。

なお、上のスライドでも本書は紹介されていて、やはり必携の名著だなーと思った次第。

このエントリーをはてなブックマークに追加