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

Sass（以下ではscss記法で紹介しています）の便利な機能や書き方をまとめました。

「入れ子」や「mixin」などの基本的な機能を紹介するだけではなく、少し応用した内容や意外と知らないことも紹介します。

また、紹介する量が多いので2回に分けて記事を作成しています。

第一回の記事では「変数」や「関数」を中心に、第二回の記事ではその他の細かい内容を中心に紹介しています。

変数

変数のスコープ

スコープとは、変数を使える範囲のことです。変数を定義した場所により、その変数を呼び出せない場合があります。

変数のスコープには2種類のパターンがあります。

• ローカル変数：ネスト（入れ子）内に定義されている変数。そのネスト内でしか使えない。
• グローバル変数：ネスト外で定義されている変数。どこでも使える。

// グローバル変数
$main-color: #333;

.container {
	// ローカル変数
	$margin-val: 20px;
	> p {
		background: $main-color; // グローバル変数だから参照出来る
		span {
			margin: $margin-val; // ネスト内で定義された変数だから参照出来る（ローカル変数）
		}
	}
}

p {
	color: $main-color; // グローバル変数だから参照出来る
	margin: $margin-val; // ネスト外で定義された変数だから参照出来ない（ローカル変数）
}

セレクタやプロパティで変数を使う

プロパティの値として変数を使う場合は、以下のように記述するかと思います。

.txt {
	color: $main-color;	
}

しかし、以下のようにセレクタやプロパティとして変数を使うとエラーになってしまいます。

.$selector {
	$color: #fff;
}

セレクタやプロパティで変数を使いたい場合は、#{}で変数を囲い、#{$変数名}のようにしてあげます。

.#{$selector} {
	#{$color}: #fff;
}

配列の書き方

配列は主にfor文、each文で使われます。ここでは、配列の書き方のみを紹介していきます。

普通の配列の場合は以下のように、配列の名前を最初に定義して、値をカンマか半角スペース区切りで書きます。また、値を丸括弧で囲うことも出来ます。

// カンマ区切り
$name: taro, jiro, saburo;

// 半角スペース区切り
$name: taro jiro saburo;

// 丸括弧で値を囲う
$name: (taro, jiro, saburo);
$name: (taro jiro saburo);

連想配列の場合は丸括弧で値を囲います。普通の配列とは違い、カンマや半角スペースで区切ったらエラーが出てしまうので、連想配列は丸括弧で囲って下さい。

$color: (
	base: #ccc,
	sub: #ddd,
	accent: #f00
);

繰り返し処理

for文

繰り返し処理の開始時の値と終了時の値を設定して、その値を1ずつ増やしながら繰り返し処理を行います。

 

■ 使う場面の例

• marginやpaddingの調整用のクラスを一括で生成したい時

以下のように、@forの後に任意の変数名、fromの後に開始時の値を、throughの後に終了時の値を指定します。

その後、代入したい箇所に先程設定した任意の変数名を記述します。

// scss
@for $i from 1 through 3 {
	.margin-top--#{$i * 10} {
		margin-top: #{$i * 10}px;
	}
}

// コンパイル後
.margin-top--10{
	margin-top: 10px;
}
.margin-top--20{
	margin-top: 20px;
}
.margin-top--30{
	margin-top: 30px;
}

each文

配列を指定して、その配列の値の数だけ繰り返し処理を行います。

■ 使う場面の例

• 各セクションごとに違う背景画像を設定したい時
• SNSなどのアイコンをfontawesomeで指定しており、それぞれ違う色を設定したい時

以下のように、@eachの後に任意の変数名、inの後に配列の変数名を指定します。

その後、代入したい箇所に先程設定した任意の変数名を記述します。

// scss
$fileName: about, company, overview, contact;

@each $i in $fileName {
	.section__bg--#{$i} {
		background: url(../img/bg_#{$i}.png) no-repeat;
	}
}

// コンパイル後
.section__bg--about {
	background: url(../img/bg_about.png) no-repeat;
}
.section__bg--company {
	background: url(../img/bg_company.png) no-repeat;
}
.section__bg--overview {
	background: url(../img/bg_overview.png) no-repeat;
}
.section__bg--contact {
	background: url(../img/bg_contact.png) no-repeat;
}

 

また、連想配列をeach文で使うことも出来ます。

// scss
$sns-icn-color: (
	'twitter' : #4CAEE7,
	'facebook': #415993,
	'googlePlus' : #CA523F,
	'hatenaBm' : #3C8ED8
);

@each $key, $values in $sns-icn-color {
	.sns-icn--#{$key} {
		background-color: $values;
	}
}

// コンパイル後
.sns-icn--twitter {
	background-color: #4CAEE7;
}

.sns-icn--facebook {
	background-color: #415993;
}

.sns-icn--googlePlus {
	background-color: #CA523F;
}

.sns-icn--hatenaBm {
	background-color: #3C8ED8;
}

組み込み関数

組み込み関数とは、sassで予め用意されている関数のことです。組み込み関数はたくさんあるので、今回は私がよく使うものを紹介します。

lighten、darken関数

ベースとなる色を指定して、明度を増減させる関数です。変化する割合はパーセンテージで指定します。

lighten関数なら明度が高く、darken関数なら明度が低くなります。

.txt{
    color: lighten(#f00, 80%);
    background-color: darken($color, 20%);
}

nth関数

指定した配列からn番目の値を返します。

// scss
$arr: auto, 0 auto, 20px;

.elements{
	&--A{
		margin: nth($arr, 1);
	}
	&--B{
		margin: nth($arr, 2);
	}
	&--C{
		margin: nth($arr, 3);
	}
}

// コンパイル後
.elements--A {
	margin: auto;
}
.elements--B {
	margin: 0 auto;
}
.elements--C {
	margin: 20px;
}

また、if文でnth関数を使い、true / falseで値を出し分けることも可能です。

コンパイル出来る環境で、$borderTopの最初の値をtrueかfalseに変えてみて下さい。
trueの場合はsolid 2px #000が返ってきて、falseの場合はnoneが返ってきます。

// scss
$borderTop: true, solid 2px #f00, none;

.elements{
	@if nth($borderTop, 1) == true{
		border-top: #{nth($borderTop, 2)};
	} @else if nth($borderTop, 1) == false{
		border-top: #{nth($borderTop, 3)};
	}
}

// コンパイル後
.elements { // trueの場合
	border-top: solid 2px #f00;
}
.elements { // falseの場合
	border-top: none;
}

length関数

指定した配列の値の数を返します。

// scss
$arr-1: auto, 0 auto, auto 0;
$arr-2: A, B;

@if length($arr-1) == 2{
	.test{
		width: auto;
	}
} @else if length($arr-1) == 3{
	.test{
		height: auto;
		z-index: length($arr-2);
	}
}

// コンパイル後
.test {
	height: auto;
	z-index: 2;
}

まとめ

変数や関数の便利な機能の紹介は以上になります。

変数を使う際には、変数専用のファイルを用意したほうが管理しやすくなります。意味なく複数のファイルで変数を定義するのはやめましょう。

組み込み関数は本当にたくさんあるので、公式ドキュメントやまとめサイトを見てみると便利な関数を発見をするかもしれません。

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