2018.5.22

Sassの覚えておきたい便利な機能や書き方のまとめ 〜 第二回 〜

Sassの便利な機能や書き方をまとめた記事の第二段になります。

この記事では、第一回で紹介した「変数」や「関数」以外のさらに細かい内容を中心に紹介していきます。

@at-root

@at-rootを使うと、記述した箇所より上のネスト(入れ子)を解除することが出来ます。

以下、簡単な動作サンプルです。

// scss
.test{
	&__inner{
		p{
			color: fff;
		}
		@at-root p{
			color: #000;
		}
	}
}

// コンパイル後
.test__inner p {
	color: fff;
}
p {
	color: #000;
}

上記サンプルでは、&__innerの中のpに対してスタイルを当てています。@at-rootを使ったpはコンパイル後、ネストが解除されているのを確認出来るかと思います。

 

次に、実用的なサンプルを紹介します。以下のようなhtmlがあり、「各セクションの見出しを別々の色にしたい」という想定です。

<section class="section section__about">
	<h2 class="headline">about</h2>
	<div>
		<!--
			コンテンツ
		-->
	</div>
</section>

<section class="section section__member">
	<h2 class="headline">member</h2>
	<div>
		<!--
			コンテンツ
		-->
	</div>
</section>

<section class="section section__contact">
	<h2 class="headline">contact</h2>
	<div>
		<!--
			コンテンツ
		-->
	</div>
</section>

@at-rootを使わないでscssを記述すると以下のような形になるかと思います。

.section{
	&__about{
		background-color: #ccc;
		.headline{
			color: #f00;
		}
	}
	&__member{
		background-color: #ddd;
		.headline{
			color: #0f0;
		}
	}
	&__contact{
		background-color: #eee;
		.headline{
			color: #00f;
		}
	}
}
.headline{
	font-size: 16px;
	font-weight: bold;
}

この書き方では、21行目の.headlineに共通のスタイルを書き、各セクションのスタイルの中で.headlineの色を出し分けています。この書き方だと、見出しのスタイルが複数箇所で定義されており、これよりさらに記述量が増えたら見通しが悪くなります。

しかし、@at-rootを使うことで、この問題を解決することが出来ます。以下サンプルが、@at-rootを使って見出しのスタイルを一箇所にまとめた記述方法です。

.section{
	&__about{
		background-color: #ccc;
	}
	&__member{
		background-color: #ddd;
	}
	&__contact{
		background-color: #eee;
	}
}
.headline{
	$prarent: &;
	font-size: 16px;
	font-weight: bold;
	@at-root .section{
		&__about #{$prarent}{
			color: #f00;
		}
		&__member #{$prarent}{
			color: #0f0;
		}
		&__contact #{$prarent}{
			color: #00f;
		}
	}
}

このように@at-rootを使うことで、スタイルを一箇所にまとめることが出来ます。

また、$prarentの変数には、&を定義しています。つまり、親のセレクタの.headlineが値として定義されています。変数を使わずに、&__about .headlineのように記述しても特に問題は無いですが、.headlineのクラス名が変わった時に変数を使っていれば一箇所の変更のみで対応出来るというメリットがあるのでこの書き方をしています。

mixinのinclude時に引数を省略する

mixinで引数に初期値が設定されている場合は引数を省略することが出来ます。

引数の初期値は、引数名: 初期値のように定義することが出来ます。

// scss
@mixin test($width: 200px, $height: 100px, $margin: auto){
	width: $width;
	height: $height;
	margin: $margin;
}
.test{
	@include test;
}

// コンパイル後
.test {
	width: 200px;
	height: 100px;
	margin: auto;
}

 

また、最初の引数だけ自分で値を渡して、その後の引数は省略することも出来ます。

// scss
@mixin test($width: 200px, $height: 100px, $margin: auto){
	width: $width;
	height: $height;
	margin: $margin;
}
.test{
	@include test(50px, 10px);
}

// コンパイル後
// 1つ目と2つ目の引数は呼び出し時に値を渡したから初期値が上書かれた
// 3つ目の引数は呼び出し時に値を渡していないから初期値のまま
.test {
	width: 50px;
	height: 10px;
	margin: auto;
}

しかし、この方法だと、最初の引数は省略出来ても、途中の引数のみを省略することは出来ません。

(引数が3つあったとして、2番目の引数だけ省略するのは上記の方法だと不可能)

途中の引数を省略するには、省略したい引数以外を、引数の名前と値をセットでinclude時に与えてあげることで省略することが出来ます。

// scss
@mixin test($width: 200px, $height: 100px, $margin: auto){
	width: $width;
	height: $height;
	margin: $margin;
}
.test{
	@include test($width: 30px, $margin: 20px);
}

// コンパイル後
.test {
	width: 30px;
	height: 100px; // 省略したこの値は初期値になる
	margin: 20px;
}

共通のスタイルはプレースホルダーを使おう

プレースホルダーとは、コンパイルされてもcssに反映されないのクラスです。

以下のように、%セレクタ名で定義した内容はcssにはコンパイルされません。

// scss
%test {
	width: 95%;
	margin: auto;
}
.wrap{
	@extend %test;
}

// コンパイル後
.wrap {
	width: 95%;
	margin: auto;
}

重複したスタイルはプレースホルダーextendを使うことで、コンパイル後のcssのコード量を減らすことが出来ます。

以下、重複したスタイルをextendmixinでそれぞれ記述したサンプルです。

extendはひとつのスタイルにまとめられ、それに対してmixinはバラバラのスタイルにコンパイルされてしまいます。

// placeholder
%test_placeholder {
	width: 95%;
	margin: auto;
}
.wrap{
	@extend %test_placeholder;
}
.header{
	@extend %test_placeholder;
}
.footer{
	@extend %test_placeholder;
}
// コンパイル後
.wrap, .header, .footer {
	width: 95%;
	margin: auto;
}

// =================================

// mixin
@mixin text_mixin{
	width: 95%;
	margin: auto;
}
.wrap{
	@include text_mixin;
}
.header{
	@include text_mixin;
}
.footer{
	@include text_mixin;
}

// コンパイル後
.wrap {
	width: 95%;
	margin: auto;
}

.header {
	width: 95%;
	margin: auto;
}

.footer {
	width: 95%;
	margin: auto;
}

extendとmixinの使い分けとしては、重複したスタイルを処理したい場合はextendを、引数などを使い複雑な処理をしたい場合はmixinを使うのが良いと思います。

番外編:web上で簡単にSassの動作を試す

sassの機能ではないですが、web上のエディタでsassを記述したらリアルタイムでcssにコンパイルして表示してくれる便利なサイトがあります。

sassを試し書きしたい時に便利なサイトです。

SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.

まとめ

Sassを効率良く使えば、コーディング時間が短くなり、コードも綺麗になります。

Sassには便利な機能がたくさんありすぎて、正直使い始めの頃は機能を覚えるのに精一杯だと思います。何度もコードを書いていけばだんだん慣れてきて、必ずSassを使いこなせるようになります。

Sassの便利な機能を紹介する第一回の記事もよかったらご覧下さい。

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア