ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

なぜ.scssの方が主流なの?どう考えても.sassの方が優れてる。

普段webサイトを制作している人ならもうご存知だと思われますが、SASSというcssを楽に記述するためのものがあります。

しかし、単純にSASSと言っても、拡張子が.sassと.scssの2つがあり、それぞれ記述の仕方が異なります。

後発の.scssの方が主流だとよく言われていますが、ぼくとしては.sassの方がどう見ても優れていると思うのです。

広告

.sassの良さが広まってほしい。

CSS – なぜ.sassよりも.scssの方が主流なのかわからない(11437)|teratail

上記の質問を大昔に投稿したことがあるのを、最近になって思い出しました。

答えを待った結果、.sassのインデントベースに慣れない人がいるだの、.scssの方が学習コスト低いだのと言われました。

そういうものだと思って、当時はそれで渋々納得したものですが、実際はぶっちゃけ納得いきません。

今となっては.sassの良さを説いた記事も増えていますが、それでもやはり自分からも説いていくべきだと思い、今回の記事にしました。

たとえ同じような記事であっても、自分は.sass派ですという主張を増やしていくことが、.sassの良さに気づいてもらえるきっかけになると思うのです。

.sassなら不要な記述がいらない。

たとえば通常のcssで書いた、下記のコードがあるとしましょう。

div {
	background: #000;
}

div p {
	color: #000;
	font-size: 2.0rem;
}

div span {
	font-weight: bold;
}

divタグの中にpタグやspanタグがあって、cssでそれにスタイルを当てるには、divとp、divとspanを続けて書いて…。

冷静に考えると、同じ名前ばかり書くことになって、めちゃくちゃめんどくさいですよね。

それがSASSの拡張子のうち、.scssで書いたものをcssに変換した場合はこうなります。

div {
	background: #000;
	p {
		color: #000;
		font-size: 2.0rem;
	}
	span {
		font-weight: bold;
	}
}

カッコの中にタグが入れ子になるので、わざわざタグ名をつなげて書かなくても、親子関係が非常にわかりやすいですね。

そして今度は.sassで書いた場合です。

div
	background: #000
	p
		color: #000
		font-size: 2.0rem
	span
		font-weight: bold

.scssと比較すると、タグごとについていた波括弧と、行末のセミコロンがすべてなくなりました。

たとえカッコがなくても、階層が違えば親子関係ははっきりわかりますし、.scssよりもさらにすっきりしたコードとなりました。

行末をいちいちセミコロンでシメる意味もわかりませんでしたし、無駄を徹底的に省けたと言えるでしょう。

カッコなしって逆に見にくいの?

.sassの方が見やすいと思うのですが、それでも.scssの方が見やすいと言い張る人たちがいます。

カッコがないから、どこからどこまでが囲われているのかわかりにくいとか…。

でもそれって、その人のコードの書き方に問題があると思うのです。

たとえば下記のような.sassのコードがあったとします。

.hoge
	.hoge1
		.hoge2
			.hoge3
				.hoge4
					.hoge5
						color: #fff
						margin-top: 1px
						margin-left: 1px
						margin-right: 1px
						margin-bottom: 1px
						padding-top: 1px
						padding-left: 1px
						padding-right: 1px
						padding-bottom: 1px
						border-top: 1px solid #000
						border-left: 1px solid #000
						border-right: 1px solid #000
						border-bottom: 1px solid #000
	.fuga
		color: #f00

上記は極端な例ではありますが、これだとhogeクラスの中に入れ子が多すぎて、fugaというクラスもhogeの中にあるというのが、パッと見わかりません。

hogeの外にあるようにも見えますし、あるいはhogeの中のhoge1の中にあるようにも見えます。

でもこれはsassどうのこうのではなく、入れ子しすぎの書き方を改めるべきです。

htmlの方でhoge5のクラス名を、他とは被りにくいクラス名にするだけで、入れ子を解決できるでしょう。

.sassの書き方を覚えられない?

.scssを選ぶ理由として、学習コストが低いからという意見もあります。

たしかに.scssはカッコとセミコロンがある分、本来のcssに近い見た目になっています。

だからと言って、.sassの学習コストが高いとは、全くもって思えないのです。

だって、.scssの書き方から単純に、カッコとセミコロンを省くだけですよ?

ただそれだけのことで、学習コストがうんぬんという話にはならないと思います。

インデントベースじゃない.scssは崩れやすい。

.scssはカッコで囲う記述方法であるため、各行のインデントには制限がありません。

でもそれは、崩れたコードを招きやすいという欠点につながります。

div {
	color: #f00;
  font-size: 2.0rem;
}

たとえば.scssで書いた上記のコード、見た目ではわからないのですが、各行のインデントの書き方がめちゃくちゃになっています。

1行目はタブ1つですが、2行目ではスペース2つであり、全くもって揃っていません。

それなのにcssに変換できてしまうのです。

崩れてもエラーにならないなら、それってメリットじゃないの?

って思い込むかもしれませんが、見た目が崩れたコードだと、たとえカッコで囲っていても、同じタグ内に入っているものとはわかりづらくなります。それに美しくない。

div
	color: #f00
  font-size: 2.0rem

一方で.sassでインデントが崩れた書き方をすると、エラーになってしまいます。

つまり、インデントを揃えることを強制することで、崩れたコードになることを防げます

タブ1つあるいは、スペース2つのどちらかに統一されていれば、どちらでもエラーになることはありません。

しかし、ぼくとしては断然、タブを使ってもらいたいです。SASSに限った話でなく、コーディング全体で。

スペースだと、2回も押すの面倒じゃないですか?

タブだとたいていのテキストエディタではスペース4つ分の大きさですが、どうしてもスペース2つ分の大きさにしたいなら、テキストエディタの設定を変えればいいこと。

いろんな人がいろんなテキストエディタを使っていて、見た目は別であっても、コードとしては実質同じ。

タブならば、柔軟にいろんな作業環境に対応できるのです。

データ容量的にもスペース1つとタブ1つは、どちらも1バイト。同じ1バイトなのに、大きく見えるのはタブ。

タブの方が容量の節約になると言えます。とはいえ、今の時代に細かいサイズなんて気にしませんが。

セミコロン不要による弱点

万能に思われた.sassですが、どうしても一つだけ弱点があります。

たとえば.scssの方で、下記のようなmixinを作ったとしましょう。

@mixin text-stroke($color: #fff, $size: 2px) {
	text-shadow:
		$color $size 0px,  $color (-$size) 0px,
		$color 0px (-$size), $color 0px $size,
		$color $size $size , $color (-$size) $size,
		$color $size (-$size), $color (-$size) (-$size),
		$color ($size/2) $size,  $color (-$size/2) $size,
		$color ($size/2) (-$size), $color (-$size/2) (-$size),
		$color $size ($size/2),  $color (-$size) ($size/2),
		$color $size (-$size/2), $color (-$size) (-$size/2);
}

上記はテキストに輪郭線のようなものを、シャドウで実現するためのものです。

色と線のサイズを引数として使うことができます。

しかし、これを.sassで書いた場合はこうなります。

@mixin text-stroke($color: #fff, $size: 2px)
	text-shadow: $color $size 0px, $color (-$size) 0px, $color 0px (-$size), $color 0px $size, $color $size $size, $color (-$size) $size, $color $size (-$size), $color (-$size) (-$size), $color ($size/2) $size, $color (-$size/2) $size, $color ($size/2) (-$size), $color (-$size/2) (-$size), $color $size ($size/2), $color (-$size) ($size/2), $color $size (-$size/2), $color (-$size) (-$size/2)

.sassには行末のセミコロンがなく、改行した時点で1つのスタイルだと見なされます。

つまり、.sassでは1つのスタイルを複数行に渡って書くことができません

よって上記のようにひたすら横長い1行にせざるを得ませんでした。

たとえ、すっきりすると言われる.sassであっても、このような書き方をしていると逆効果です。

よって、mixinだけは.scssで書いて、.sass側でmixinをインポートする方がいいでしょう。

@import "mixin"

上記のコードを書くと、同じフォルダ内にあるmixinという名前のSASSファイルを読み込むことができます。

拡張子の指定はないのですが、.sassと.scssどちらも対象になります。

先程までずっと.sassと.scssの対立を煽ってきましたが、結果的には仲良く共存という形になりましたね。