今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾!

今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾!

こんばんは。9月病(あるのか知らんけど)に陥り、頭がフワフワしているtaisonです。

もぉ秋ですねぇ、、、

さて、Twitterで人知れず宣言していたのですが、

10月はcss強化月間!

という事で、本日第1弾の開幕でございます。

css強化月間第1弾sassを活用する

コーディングを担当する人はよく目にするのではないでしょうか?

知らない人もいると思うので簡単に説明すると、

cssを入れ子にしたり変数を使ってcss文章をまとめることが出来るちょっとプログラミング寄りの言語

です。

主にcss3に無い機能を補完する役割を持っているのですが、css自体の保守管理にも非常に役立ちます。

その保守性から、bootstrapのようなフレームワークにもあらかじめファイルが用意されてたりします。

(ちなみにbootstrapのデフォルトはscssと似た言語のlessというファイルにまとめられている)

実際にsassを使用した場合はそのままでは使えません。

出力をしてcssに変換する必要があるので、初めて使用する方は、タスクランナーなどの変換ツール使用をご検討下さい。
(preprosというツールが一番入りやすいかも)

ちなみにsassとscssって二つの名前が出てますが、これらは基本的には同じものです。

scssの方がcssチックな書き方になるので、初めはscssの方が馴染みやすいかも。

では、実際にsass(scss)にはどんな機能があるのか。

大枠を確認してみましょう。

sassが提供する便利機能

大きく分けると主に4つの機能が特徴となっています。

変数
頭に$をつけた変数名に値を入れて宣言すると、その後は変数を設置するだけで同じ値を量産できちゃいます。


/** scss **/

$red: #ff0000;

.text-red{
	color: $red; //赤になる
}
.redBox{
	border: 1px solid $red; //赤になる
}

/** sass **/

$red: #ff0000

.text-red
	color: $red //赤になる

.redBox
	border: 1px solid $red //赤になる

		

値を変えたい場合は変数内の値一個を変更するだけでok!
修正がラクになりますね!

ネスティング
入れ子。cssだと親クラス名を付与しないとスタイル適用できない場合に重宝します。


/** scss **/
ul.test{
	margin: 1rem;
	li{
	padding-bottom: 0.5rem;
}
}

/** 出力結果 **/
ul.test{
	margin: 1rem;
}
ul.test li{
	padding-bottom: 0.5rem; //勝手に親クラスが付与
}

			

修正する時に判断するのがラクになりますね!

ミックスイン
これはちょっとプログラミングチックなシロモノなんですが、@mixinで宣言した関数を@includeを使って呼び出すことが出来る機能です。


/** scss **/

@mixin dlBase{
	dt{ padding-bottom: 1rem;}
	dd{ padding-bottom: 2rem;}
}
@mixin marginleft($dist){
	margin-left: $dist; //引数も使える
}

dl.test{
	@include dlBase;
	@include marginleft(1rem);
	color: #fff;
}

/** 出力結果 **/
dl.test{
	color: #fff;
	margin-left: 1rem; //引数にいれた値を返す
}
dl.test dt{
	padding-bottom: 1rem;
dl.test dd{
	padding-bottom: 2rem;
}
			

多用するスタイルがあったりする場合はコレでまとめちゃうと、、、ラクになりますね!
また、繰り返し機能(@for@each@while)など、プログラミング言語でお馴染みの機能も使えちゃったりするので、一番クセが出る機能かもしれません。

セレクタの継承
これも結構すごい機能。@extendで元々指定してあるクラス名を呼び出すと、なんとそのまま呼び出したクラスのスタイルを継承できちゃいます。


/** scss **/
.textBase{
	font-size: 14px;
}
.listText{
	@extend .textBase;
	color: #fff;
}

/** 出力結果 **/
.textBase{
	font-size: 14px;
}
.listText{
	font-size: 14px; //継承される
	color: #fff;
}

			

ん?それって@includeと同じじゃないの?
と思った方!実はほんのちょっと振る舞いが違うのです。

@includeは部品化したモノを組み込むイメージで、css化した時にクラス数が増えません

かたや@extendの場合は継承になるので、組み込んだ時に@extendされたクラスが追加されます

コード量などを考えると@include一択のような気がしますが、適切にグループ化をして使う場合であれば@extendも活用する方法はあります。
例えばbtnの基本クラスに色分けする子クラスを紐づけるとか。

関連性がないものには@includeを活用しましょう。共通スタイルはあるけど関連性がないクラス同士に使用するとか。

コード書けよ。って話ですね。
ハイ、すいません。


/** extend **/

/*** 使いまわすボタンの親として関連性を持たせる ***/
.btn{
	display: inline-block;
	border-radius: 4px;
}
.otherBtn{
	@extend .btn;
	background-color: #333;
	color: #fff;
}

/** @include **/

/*** 関連性のない要素に同じスタイルをあてる ***/

@mixin baseText{
	font-size: 14px;
	margin-bottom: 1rem;
}

p.aboutText{
	@include baseText;
	color: #1a1a1a;
}
p.contactBox{
	@include baseText;
	border: 1px solid #ccc;
}
			

少し話がそれましたが、以上がsass(scss)の便利機能です。便利そうじゃないですか?

より修正しやすいcssを目指して

ざっくり説明しましたが、うまく活用することで、非常に管理しやすいcssを作成することが出来ます。

もちろん吐き出すcssの設計を考えた上での話ではありますが、より保守しやすくなるのは間違いないでしょう。

次回は意外と陥りやすいsassの罠について考えていきたいと思います。

それではまた!

cssカテゴリの最新記事