Sass（サス）チートシート

Sass公式サイト

Sass（公式サイト）

Sass（サス）の公式サイトです。（英語）
Sass: Syntactically Awesome Style Sheets

SassMeister

Sassを試してみたいときにも便利な、ブラウザでSassを書いてCSSにコンパイルしてくれるサービスです。
SassMeister

Sassの書き方

Sassの書き方は「SCSS」と、インデントを使うシンプルな構文「Sass」の2種類があります。
どちらを使っても、コンパイルして出力するCSSは同じです。

SCSS（エスシーエスエス）

SCSSは従来のCSSセレクタと同じ「{…}」で囲みながら書いていく構文です。
ファイル拡張子に「.scss」が付きます。

style.scss

#content1 {
	padding: 40px;
	background-color: #f7f7f7;

	p {
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}

	a {
		color: #0069d4;

		&:hover {
			color: #1d7fe3;
		}
	}
}

Sass（サス）

Sassはインデントのみでネストしてセレクタを書いていく構文です。
ファイル拡張子に「.sass」が付きます。

style.sass

#content1
	padding: 40px;
	background-color: #f7f7f7;

	p
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;

	a
		color: #0069d4;

		&:hover
			color: #1d7fe3;

本ページは以降では全て、SCSSによる書き方を使っていきます。

gulpによるSassコンパイル

Sassはそのままではスタイルシートとして使うことはできません。
そのため、「gulp」というタスクランナーを使ってコンパイルを行い、CSSを出力する必要があります。

gulpは「gulpfile.js」という実行するタスクを記載したJavaScriptファイルを用意し、ターミナル（WindowsではPowerShell）でgulpコマンドを呼び出して実行します。

gulpfile.js

// 読み込み
var gulp = require("gulp");
var sass = require('gulp-sass');

// ファイルパスの設定
const paths = {
	'src': {
		'scss': './dev_css/style.scss'
	},
	'dist': {
		'css': './css/'
	}
};

// タスク: sass
gulp.task('sass', () => {
	return gulp.src(paths.src.scss)
		.pipe(sass({
			outputStyle: 'expanded',
		}).on('error', sass.logError))
		.pipe(gulp.dest(paths.dist.css));
	done();
});

// タスク: watch
gulp.task('sass:watch', () => {
	gulp.watch(paths.src.scss, gulp.task('sass'));
});

gulpコマンドを実行する例

gulp sass:watch

上記のgulpコマンドを実行すると、「./dev_css/style.scss」をコンパイルして「./css/」へstyle.cssを出力します。
この出力されたCSSをHTMLから読み込むことでスタイルシートを反映させることができます。

ネスト

以下のHTMLにスタイルシートを適用するSassを書いていきます。

index.html

<main>
	<section id="content1">
		<h2>コンテンツ1</h2>
		<p>画像を表示する<br>リンクは<a href="#">こちら</a></p>
	</section>

	<section id="content2">
		<h2>コンテンツ2</h2>
		<p>リストの表示テスト</p>
		<ul>
			<li>テスト1</li>
			<li>テスト2</li>
			<li>テスト3</li>
		</ul>
	</section>
</main>

style.scss

#content1 {
	padding: 40px;
	background-color: #f7f7f7;

	p {
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}

	a {
		color: #0069d4;

		&:hover {
			color: #1d7fe3;
		}
	}

	@media screen and (max-width: 980px) {
		background-color: #00c;
	}
}

#content2 {
	padding: 40px;

	p {
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}

	ul {
		padding: 0;
		list-style-type: none;

		li {
			margin-bottom: 5px;
			font-size: 1.0rem;
			line-height: 1.8em;

			&::before {
				display: inline-block;
				content: "";
				margin-right: 10px;
				width: 10px;
				height: 10px;
				border-radius: 5px;
				background-color: #ec8813;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

コンパイルすると以下のようなstyle.cssが出力されます。（gulpのoutputStyleを「expanded」で出力）

style.css

#content1 {
	padding: 40px;
	background-color: #f7f7f7;
}

#content1 p {
	margin-bottom: 20px;
	font-size: 1.0rem;
	line-height: 1.8em;
}

#content1 a {
	color: #0069d4;
}

#content1 a:hover {
	color: #1d7fe3;
}

@media screen and (max-width: 980px) {
	#content1 {
		background-color: #00c;
	}
}

#content2 {
	padding: 40px;
}

#content2 p {
	margin-bottom: 20px;
	font-size: 1.0rem;
	line-height: 1.8em;
}

#content2 ul {
	padding: 0;
	list-style-type: none;
}

#content2 ul li {
	margin-bottom: 5px;
	font-size: 1.0rem;
	line-height: 1.8em;
}

#content2 ul li::before {
	display: inline-block;
	content: "";
	margin-right: 10px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #ec8813;
}

#content2 ul li:last-child {
	margin-bottom: 0;
}

「&」はネストしている親のセレクタが入ります。
要素名だけでなく、クラス名を子孫要素に対して使うこともできます。

クラス名をネスト内で参照する例

.content {
	background-color: #f7f7f7;

	&_title {
		font-size: 2.0rem;
	}

	&_link {
		color: #c00;
	}
}

出力されたCSS例

.content {
	background-color: #f7f7f7;
}

.content_title {
	font-size: 2.0rem;
}

.content_link {
	color: #c00;
}

プロパティのネスト

CSSのbackgroundプロパティやmarginプロパティなど複数の値を指定できるプロパティはネストして指定することもできます。

style.scss

.content {
	background: {
		image: url(../image/bg.png);
		position: left top;
		repeat: no-repeat;
		color: #f7f7f7;
	}
}

style.css

.content {
	background-image: url(../image/bg.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-color: #f7f7f7;
}

スタイルのまとまりを定義する @mixin

複数の箇所で共通するスタイルのまとまりは「@mixin ミックスイン名」でミックスインとして定義し、スタイルを適用したい箇所に「@include ミックスイン名」で呼び出すことができます。

style.scss

// ミックスイン定義
@mixin fontSet {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
}

#content1 {
	@include fontSet; // ミックスイン呼び出し
	margin-bottom: 40px;
	padding: 40px;

	h1 {
		font-size: 1.25rem;
		line-height: 1.2em;
		color: #ec8813;
	}
}

style.css

#content1 {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
	margin-bottom: 40px;
	padding: 40px;
}

#content1 h1 {
	font-size: 1.25rem;
	line-height: 1.2em;
	color: #ec8813;
}

ミックスインの引数と初期値を設定

ミックスインは関数のように引数を設定することができます。
引数を使うと部分的なスタイルの変更に対応できるため、柔軟なまとまりを定義することができるようになります。
また、引数には初期設定を指定することができます。

style.scss

@mixin fontSet( $fontSize:1.0rem, $fontWeight:400, $fontColor:#000) {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: $fontSize;
	font-weight: $fontWeight;
	line-height: 1.8em;
	color: $fontColor;
}

#content1 {
	h1 {
		@include fontSet( 1.25rem, 700);
	}
}

style.css

#content1 h1 {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.8em;
	color: #000;
}

1つの変数から複数の引数を指定

変数を使ってミックスインの複数の引数に一括で値を渡すことも可能です。
ミックスインを@includeで呼び出す時、変数の後ろに「…」を付けて値を渡します。

style.scss

// テキストごとにスタイルを用意
$h1FontStyle: 1.5rem, 700, #ec8813;
$pFontStyle: 1.20rem;
$linkFontStyle: 1.2rem, 400, #0069d4;

// ミックスインの定義
@mixin fontSet( $fontSize:1.0rem, $fontWeight:400, $fontColor:#000) {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: $fontSize;
	font-weight: $fontWeight;
	line-height: 1.8em;
	color: $fontColor;
}

#content1 {
	h1 {
		@include fontSet($h1FontStyle...); // 変数で引数に値を渡す
	}
}

style.css

#content1 h1 {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.8em;
	color: #ec8813;
}

ミックスインの引数にコンマを含む値を渡す

CSSのプロパティの中にはbackground-imageプロパティのグラデーションやbox-shadowプロパティなど、値にコンマを含むことがあります。
そのときは、ミックスインの引数の側で変数の後に「…」を付けます。

style.scss

// ミックスインの定義
@mixin backgroundSet($gradient...) {
	background: linear-gradient($gradient);
}

#content1 {
	@include backgroundSet(to right, #a1dffb 0%, #ffdfa1 100%);
}

style.css

#content1 {
	background: linear-gradient(to right, #a1dffb 0%, #ffdfa1 100%);
}

セレクタの拡張 @extend

一度書いたスタイルを複数の箇所に適用したいときは「@extend セレクタ名」で適用する範囲を拡張することができます。
複数のセレクタを拡張したり、拡張元のセレクタで別のセレクタを拡張することも可能です。

style.scss

.fontSet {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
}

.buttonSet {
	@extend .fontSet;
	display: inline-block;
	padding: 10px 20px;
	font-size: 1.25rem;
	line-height: 1.2em;
	color: #222;
	border-radius: 5px;
	background: #ddd;
}

.buttonColorOrange {
	color: #fff;
	background: #ec8813;
}

.buttonColorBlue {
	color: #fff;
	background: #0069d4;
}

#content1 {
	.button {
		@extend .buttonSet;
		@extend .buttonColorBlue;
	}
}

#content2 {
	.button {
		@extend .btn;
		@extend .buttonColorOrange;
	}
}

style.css

.fontSet, .buttonSet, #content1 .button, #content2 .button {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
}

.buttonSet, #content1 .button, #content2 .button {
	display: inline-block;
	padding: 10px 20px;
	color: #222;
	border-radius: 5px;
	background: #ddd;
	font-size: 1.25rem;
	line-height: 1.2em;
}

.buttonColorOrange, #content2 .button {
	color: #fff;
	background: #ec8813;
}

.buttonColorBlue, #content1 .button {
	color: #fff;
	background: #0069d4;
}

@extendで使用できるセレクタ

拡張専用セレクタ

@extendはスタイルを適用するセレクタを拡張しますが、拡張を前提としたスタイルを用意したい場合は拡張専用セレクタ「%」を使うことができます。
このセレクタを使うと、出力するCSSには拡張専用セレクタ自体は出力されないため、より無駄のないCSSを作成することができます。

style.scss

%fontSet {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
}

%buttonSet {
	@extend %fontSet;
	display: inline-block;
	padding: 10px 20px;
	color: #222;
	border-radius: 5px;
	background: #ddd;
	font-size: 1.25rem;
	line-height: 1.2em;
}

%buttonColorOrange {
	color: #fff;
	background: #ec8813;
}

%buttonColorBlue {
	color: #fff;
	background: #0069d4;
}

#content1 {
	.button {
		@extend %buttonSet;
		@extend %buttonColorBlue;
	}
}

#content2 {
	.button {
		@extend %buttonSet;
		@extend %buttonColorOrange;
	}
}

style.css

#content1 .button, #content2 .button {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
}

#content1 .button, #content2 .button {
	display: inline-block;
	padding: 10px 20px;
	color: #222;
	border-radius: 5px;
	background: #ddd;
	font-size: 1.25rem;
	line-height: 1.2em;
}

#content2 .button {
	color: #fff;
	background: #ec8813;
}

#content1 .button {
	color: #fff;
	background: #0069d4;
}

@extendのスコープ

@extendはスコープがあり、@media内では外にあるスタイルを拡張できません。
@mediaの中でも@extendを使いたいときは、@mediaに拡張するためのスタイルを用意します。

style.scss

// NG
%fontSet1 {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
}

@media screen and (max-width: 980px) {

	// OK
	%fontSet2 {
		font-family: noto-sans-cjk-jp, sans-serif;
		font-size: 1.0rem;
		font-weight: 400;
		line-height: 1.8em;
		color: #000;
	}

	#content1 {
		@extend %fontSet1; // エラーが発生する
		@extend %fontSet2; // OK
	}
}

存在しないセレクタを拡張したときのエラー発生を無視する

存在しないセレクタを@extendで拡張しようとするとエラーが発生しますが、!optionalフラグを付けるとエラーが発生しなくなります。
コンパイルはそのまま実行されますが、存在しないセレクタを呼び出している箇所は何も出力されません。

style.scss

%fontSet {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.8em;
	color: #000;
}

#content1 {
	@extend %fontSet2; // エラーが発生する
	@extend %fontSet2　!optional; // OK（何も起こらない）
}

変数

「$color」のように「$ + 変数名」で変数を使うことができます。
変数に値を設定しておくと、共通の値（フォントの色やサイズなど）を管理しやすくなります。

style.scss

$colorText: #c00;
$colorLink: #0069d4;

.content {

	h1 {
		color: $colorText;
	}

	p {
		color: $colorText;

		a {
			color: $colorLink;
		}
	}
}

style.css

.content h1 {
	color: #c00;
}

.content p {
	color: #c00;
}

.content p a {
	color: #0069d4;
}

変数名に使える文字

変数名には半角英数の他に「–（ハイフン）」「_（アンダースコア）」、マルチバイト文字を使うことができます。
それ以外の記号と、変数名の先頭に数字は使えません。

使うことができる変数名

$mgb10: 10px; // 半角英数
$MGB15: 15px; // 半角英数 大文字
$mgb_10: 10px; // _（アンダースコア）
$mgb-15: 15px; // -（ハイフン）
$余白３０: 30px; // 全角、日本語
$_mgb10: 10px; // 先頭に_（アンダースコア）
$-mgb10: 10px; // 先頭に-（ハイフン）
$---mgb20: 20px; // 先頭に_（アンダースコア）3つ
$___mgb20: 20px; // 先頭に-（ハイフン）3つ

使うことができない変数名

$10mgb: 10px; // 先頭に数字
$mgb10+: 10px; // 「-」「_」以外の記号
$$mgb10: 10px; // 先頭に「-」「_」以外の記号

スコープ

ネスト内で宣言した変数は、そのネストか子孫のネストの範囲でのみ使うことができます。

変数のスコープ範囲の例

$v1: 10px;

#content1 {
	$v2: 20px;
	padding: $v1; // OK

	h1 {
		$v3: 30px;
		padding: $v2; // OK
	}

	p {
		padding: $v2; // OK

		span {
			margin-left: $v2; // OK
		}
	}

	margin-bottom: $v3; // NG
}

#content2 {
	padding: $v2; // NG

	h1 {
		padding: $v1; // OK
	}

	p {
		padding: $v1; // OK
	}
}

補完（Interpolation）

補完（Interpolation）は変数を「#{変数名}」で囲みます。
補間を使うとセレクタ名やbackgroundプロパティのurl()内で変数の値を使うことができます。

style.scss

// 変数を設定
$content1: "content1";
$img_path: "/asset/image/bg_content1.png";

##{$content1} {
	padding: 40px;
	background: url(#{$img_path}) left top no-repeat;

	.#{$content1}_title {
		font-size: 2.0rem;
		line-height: 1.2em;
		color: #222;
	}

	.#{$content1}_lead {
		font-size: 1.25rem;
		color: #555;
	}
}

出力されたCSSでは、次のように変数の値を展開します。

style.css

#content1 {
	padding: 40px;
	background: url(/asset/image/bg_content1.png) left top no-repeat;
}

#content1 .content1_title {
	font-size: 2.0rem;
	line-height: 1.2em;
	color: #222;
}

#content1 .content1_lead {
	font-size: 1.25rem;
	color: #555;
}

グローバル変数を優先する!defaultフラグ

同じ名前の変数に新しい値をセットするとネスト内のローカル変数が優先されますが、!defaultフラグを使うとグローバル変数の値を優先して出力できます。

style.scss

// グローバル変数
$v: 10px;

#content1 {
	$v: 20px !default;
	padding: $v;
}

#content2 {
	$v: 20px;
	padding: $v;
}

style.css

#content1 {
	padding: 10px;
}

#content2 {
	padding: 20px;
}

グローバル変数にする!globalフラグ

ネスト内のローカル変数に!globalフラグを使うと、他の場所でも使えるグローバル変数として扱えるようになります。

style.scss

#content1 {
	$v: 20px !global;
	padding: $v;
}

#content2 {
	padding: $v;
}

style.css

#content1 {
	padding: 20px;
}

#content2 {
	padding: 20px;
}

!globalフラグと!defaultフラグを組み合わせると、特定の変数を他のネスト内にあるローカル変数よりも優先することが可能です。

style.scss

#content1 {
	$v: 20px !global;
	padding: $v;
}

#content2 {
	$v: 10px !default;
	padding: $v;
}

style.css

#content1 {
	padding: 20px;
}

#content2 {
	padding: 20px;
}

演算

基本的な四則演算を実行することができ、コンパイル時に計算を行ってCSSに計算結果を出力します。
演算では変数の値を使って計算することができます。

style.scss

// 変数の設定
$content_width: 1200px;
$sidebar_width: 300px;
$a: "Hello ";
$b: "Sass";

$width: 1200 + 40; // 1240
$width: $content_width + 40px; // 1240px
$width: $content_width - $sidebar_width; // 900px
$width: $content_width * 0.5; // 600px
$width: $content_width / 3; // 400px
$width: $content_width % 980px; // 220px

// 四則演算の計算順序
$width: 100% - (($sidebar_width * 2) / ($content_width * 2)); // 99.75%;

// 「+」は文字列の連結もできる
$content: $a + $b; // "Hello Sass"

四則演算の計算順序は一般的な計算と同様に「*」と「/」が先に計算され、それ以外は先頭からになります。
もし先に計算したい値があるときは「(…)」で囲むことで計算順序を優先できます。

値の単位は「px」や「%」などが混じっていると計算できません。
1つの値に単位があり、それ以外の値は数値のみといった場合は自動的に単位を統一して計算されます。

style.scss

$width: 1200px + (500 / 2 ) - (500 * 2); // 450px

コンテンツの幅を計算するときなどに「100% – 300px」のような異なる単位同士の計算を使うことがありますが、Sassの四則演算ではできません。
そのため、このようなケースではCSSのcalc関数に値を渡してスタイルシートで計算します。
変数の値はSassコンパイル時には演算しないように補間（#{…}）を使って記述します。

style.css

$sidebar_width: 300px;

#content1 {
	padding: 40px;
	box-sizing: border-box;
	width: calc(100% - #{$sidebar_width});
}

style.scss

#content1 {
	padding: 40px;
	box-sizing: border-box;
	width: calc(100% - 300px);
}

外部のファイルを読み込む

@useを使うと、別ファイルの.scss、.sass、.cssを読み込んでコンパイルし、1つのCSSとして出力します。
CSSの@importのように先頭で読み込む必要はなく、読み込みたい位置で呼び出すことができます。

以下の例ではページの.scssファイルを以下の6ファイルに分けていることを想定し、style.scssが他のファイルを読み込んで1つのstyle.cssとして出力します。

scssファイル

• style.scss
• page2.scss
• page3.scss
• _header.scss
• _footer.scss
• _sidebar.scss

読み込んだ.scssファイルは読み込んだ順にコンパイルされてCSSに出力します。

style.scss

body {
	font-size: 16px;
	background-color: #eee;
}

// scssファイルを読み込み
@use 'page2.scss';
@use 'page3.scss';
@use '_header.scss';
@use '_footer.scss';
@use '_sidebar.scss';

... 省略 ...

@useではファイル名の先頭にある「_（アンダースコア）」を省略して記述することができます。
また、拡張子「.scss」も省略可能です。

style.scss

body {
	font-size: 16px;
	background-color: #eee;
}

// scssファイルを読み込み
@use 'page2';
@use 'page3';
@use 'header';
@use 'footer';
@use 'sidebar';

... 省略 ...

通常のCSSファイルを読み込んだり、.scssファイルから.sassファイルを読み込んでコンパイルすることも可能です（.sassから.scssの読み込みも可）。
以下の例ではいずれの書き方を使っても読み込むことができます。

style.scss

// CSSを読み込む
@use url("other.css");
@use url(other.css);
@use "other.css";
@use 'other.css';

// .sassを読み込む
@use 'header.sass';
@use '_header.sass';

複数の読み込むファイルを一括指定

読み込みたいファイルが複数ある場合、読み込むファイルを書いた_index.scss（または_index.sassを@use）を用意します。
読み込むファイルは.scss、.sass、.cssが混在していても大丈夫です。

以下の例ではsassフォルダにstyle.scss、_index.scss、その他のscssファイルが全て入っている場合、コンパイルするときにstyle.scssが自動的に他のscssファイルを読み込みます。

style.scss

// ファイルを読み込む
@use "sass";

_index.scss

@use 'header';
@use 'footer';
@use 'sidebar';

コメント

コメントは1行コメントの「//コメント」と複数行コメントの「/* コメント */」の2種類あります。

1行コメント

「// コメント」は1行コメントと呼び、//以降のテキストがコメント扱いになります。
1行コメントはSassコンパイル時に取り除かれるため、出力するCSSには残りません。

style.scss

// コンテンツ1
#content1 {

	p {
		// padding: 20px;
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}
}

style.css

#content1 {

	p {
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}
}

複数行コメント

「/* コメント */」は複数行コメントと呼び、/*から*/の間にあるテキストがコメント扱いになります。
名前の通り複数の行に渡ってコメントを書くことができます。
また、複数行コメントは出力形式がcompressed以外の場合はコンパイルしてもCSSに残ります。
出力形式がcompressedのときは1行コメントと同様にコンパイル時に取り除かれます。

style.scss

/* コンテンツ1 */
#content1 {

	p {
		/* padding: 20px; */
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}
}

style.css

/* コンテンツ1 */
#content1 p {
	/* padding: 20px; */
	margin-bottom: 20px;
	font-size: 1.0rem;
	line-height: 1.8em;
}

出力形式がcompressedのときもコメントを残したいときは、コメントの先頭を「/*!」と書くと残すことができます。

style.scss

#content1 {

	p {
		/*! padding: 20px; */
		margin-bottom: 20px;
		font-size: 1.0rem;
		line-height: 1.8em;
	}
}

style.css

#content1 p{/*! padding: 20px; */margin-bottom:20px;font-size:1.0rem;line-height:1.8em}

データの型

Sassで扱うことができるデータの型は8種類です。

条件分岐

@if、@else if、@elseを使って条件分岐することができます。

style.scss

// 変数の設定
$v: 2;

@if $v == 1 {

	main {
		margin: 20px 0;
		padding: 20px;
	}
}
@else if $v == 2 {

	main {
		margin-bottom: 80px;
		padding: 40px;
	}
}
@else {

	main {
		padding: 40px;
	}
}

style.css

main {
	margin-bottom: 80px;
	padding: 40px;
}

@ifの条件式で使うことができる比較演算子

@ifの条件式で使うことができる論理演算子

ループ(1) @for

@forは指定した回数のループ処理を実行します。
ループする回数はNumber（数値）で指定し、「em」など単位のある数値は使えません。

ループがいま何回目かは@forに続く変数に入り、ループが進むごとに自動的に1が足されていきます。

ループする回数は「from 1 through 5」（5以下：1、2、3、4、5）、「from 1 to 5」（5未満：1、2、3、4）のいずれかで指定します。

through（n以下）

ループ回数を「from 0 through 5」で指定するタイプです。

style.scss

@for $i from 0 through 5 {

	$marginBottom: $i * 5;

	.mbg#{$marginBottom}{
		margin-bottom: #{$marginBottom}px;
	}
}

style.css

.mbg0 {
	margin-bottom: 0px;
}

.mbg5 {
	margin-bottom: 5px;
}

.mbg10 {
	margin-bottom: 10px;
}

.mbg15 {
	margin-bottom: 15px;
}

.mbg20 {
	margin-bottom: 20px;
}

.mbg25 {
	margin-bottom: 25px;
}

to（n未満）

ループ回数を「from 0 to 5」で指定するタイプです。

style.scss

@for $i from 0 to 5 {

	$marginBottom: $i * 5;

	.mbg#{$marginBottom}{
		margin-bottom: #{$marginBottom}px;
	}
}

style.css

.mbg0 {
  margin-bottom: 0px;
}

.mbg5 {
	margin-bottom: 5px;
}

.mbg10 {
	margin-bottom: 10px;
}

.mbg15 {
	margin-bottom: 15px;
}

.mbg20 {
	margin-bottom: 20px;
}

ループを開始する値には負の数値を指定することもできます。

style.scss

// 負の数値
@for $i from -2 through 2 {

	$left: $i * 5;

	.left#{$left}{
		left: #{$left}px;
	}
}

style.css

.left-10 {
	left: -10px;
}

.left-5 {
	left: -5px;
}

.left0 {
	left: 0px;
}

.left5 {
	left: 5px;
}

.left10 {
	left: 10px;
}

ループ(2) @while

@whileは条件を満たす限りループ処理を実行します。
@ifと同様に条件式を指定するため、@forよりも複雑な条件を使ったループができます。

style.scss

// 変数の設定
$i:0;

@while $i < 3 {

	$marginBottom: $i * 5;

	.mbg#{$marginBottom}{
		margin-bottom: #{$marginBottom}px;
	}

	$i: $i + 1;
}

style.css

.mbg0 {
	margin-bottom: 0px;
}

.mbg5 {
	margin-bottom: 5px;
}

.mbg10 {
	margin-bottom: 10px;
}

条件式では論理演算子を使うこともできます。
以下の例では変数$flagの値をfalseにしているため、ループは実行されません。

style.scss

// 変数の設定
$i:0;
$flag: false;

@while $i < 3 and $flag {

	$marginBottom: $i * 5;

	.mbg#{$marginBottom}{
		margin-bottom: #{$marginBottom}px;
	}

	$i: $i + 1;
}

ループ(3) @each

@eachはList（配列）の要素の数だけループ処理を実行します。

style.scss

// 変数の設定
$list1: [ 'top', 'about', 'news', 'contact'];

@each $v in $list1 {

	##{$v} {
		display: flex;
		margin-bottom: 40px;
	}
}

style.css

#top {
	display: flex;
	margin-bottom: 40px;
}

#about {
	display: flex;
	margin-bottom: 40px;
}

#news {
	display: flex;
	margin-bottom: 40px;
}

#contact {
	display: flex;
	margin-bottom: 40px;
}

多次元になっているListも@eachを入れ子にすることで全ての要素の数だけループすることができます。

style.scss

// 2次元のList
$list2: [
	['top','top_content1','top_content2'],
	['about','about_content1','about_content2']
];

@each $v in $list2 {
	@each $selector in $v {
		.#{$selector} {
			display: flex;
		}
	}
}

style.css

.top {
	display: flex;
}

.top_content1 {
	display: flex;
}

.top_content2 {
	display: flex;
}

.about {
	display: flex;
}

.about_content1 {
	display: flex;
}

.about_content2 {
	display: flex;
}

関数

Sassは標準で便利な関数を用意しています。

変数に使える関数

style.scss

$list1: ['banana', 'orange', 'apple'];　// List
$list2: [ ['a1', 'a2', 'a3'][ 'b1', 'b2', 'b3'][ 'c1', 'c2', 'c3']];　// 2次元のList
$map1: ("dog":"Pochi", "cat":"Tama", "fox":"Ken", "bear":"Taro");　// Map

// type-of()
@debug type-of($list1);　// DEBUG: list
@debug type-of($map1);　// DEBUG: map

// nth()
@debug nth($list1, 2);　// DEBUG: orange
@debug nth( nth($list2, 3), 2);　// DEBUG: c2

// map-get()
@debug map-get( $map1, "bear");　// DEBUG: Taro

計算に使える関数

style.scss

$number1: 1.6rem;
$number2: 10.5%;
$number3: -329.4px;

@debug abs($number1);　// DEBUG: 1.6rem
@debug round($number1);　// DEBUG: 2rem
@debug floor($number1);　// DEBUG: 1rem
@debug ceil($number1);　// DEBUG: 2rem

@debug abs($number2);　// DEBUG: 10.5%
@debug round($number2);　// DEBUG: 11%
@debug floor($number2);　// DEBUG: 10%
@debug ceil($number2);　// DEBUG: 11%

@debug abs($number3);　// DEBUG: 329.4px
@debug round($number3);　// DEBUG: -329px
@debug floor($number3);　// DEBUG: -330px
@debug ceil($number3);　// DEBUG: -329px

色に使える関数

style.scss

@debug rgba(#cccccc, 0.8);　// rgba(204, 204, 204, 0.8)
@debug rgba(#cccccc, 1.0);　// #ccc
@debug lighten(#999999, 0.8);　// #9b9b9b
@debug darken(#999999, 0.8);　// #979797

オリジナルの関数を作る

標準の関数に必要なものがないときはオリジナルの関数を作ることができます。

style.scss

@function sumVariables( $number1, $number2) {
	@return $number1 + $number2;
}

@debug sumVariables( 200, 300); // DEBUG: 500

引数の初期値を設定

関数の引数は、関数を呼び出したときに値が渡される前提ですが、値が渡されなかったときのために引数に初期値を設定することができます。
引数に初期値を設定していると、値が渡されなかったときにエラーが発生しなくなったり、一部の引数の指定を省略して関数を呼び出すことが可能になります。

style.scss

@function sumVariables( $number1:0, $number2:123) {
	@return $number1 + $number2;
}

@debug sumVariables(); // DEBUG: 123
@debug sumVariables(200); // DEBUG: 323
@debug sumVariables(500,1000); // DEBUG: 1500

デバッグ、警告文、エラー

Sassではコンパイルされた変数の値や計算結果を調べるための@debugや、問題が発生したときに意図的にメッセージを表示する@warnや@errorが用意されています。　

コンパイルした値を確認する @debug

@debugはコンパイルした変数の値や計算結果をコマンドラインに出力します。

style.scss

@debug 10 + 5; // 15
@debug 10 - 5; // 5
@debug 10 * 5; // 50
@debug 10 % 5; // 0
@debug (10 / 5); // 2
@debug "Test"; // Test
@debug type-of("Test"); // string

出力結果の例

[18:13:18] Starting 'sass'...
/style.scss:679 DEBUG: 15
/style.scss:679 DEBUG: 5
/style.scss:679 DEBUG: 50
/style.scss:679 DEBUG: 0
/style.scss:679 DEBUG: 2
/style.scss:679 DEBUG: Test
/style.scss:679 DEBUG: string
[18:13:18] Finished 'sass' after 5.64 ms

警告文を表示する @warn

@warnはコマンドラインにWARNINGを出力します。
エラーとは異なり、コンパイルは中断されません。
メッセージの中で変数の値を出力するときは補完（Interpolation）を使います。

style.scss

$v: 501px;

@if $v <= 500 {
	$width: $v;
}
@else {
	@warn "値は500px以内にしてください： #{$v}";
}

出力結果の例

[18:13:18] Starting 'sass'...
WARNING: 値は500px以内にしてください： 501px
         on line 689 of/style.scss
[18:13:18] Finished 'sass' after 5.64 ms

エラーを発生させる　@error

@errorはコマンドラインにErrorを出力し、この時点でコンパイルを中断します。
メッセージの中で変数の値を出力するときは@warnと同様に補完（Interpolation）を使います。

style.scss

$v: 501px;

@if $v <= 500 {
	$width: $v;
}
@else {
	@error "値は500px以内にしてください： #{$v}";
}

出力結果の例

[18:13:18] Starting 'sass'...
Error in plugin "sass"
Message:
	/style.scss
Error: 値は500px以内にしてください： 501px
        on line 696 of /style.scss
>>      @error "値は500px以内にしてください： #{$v}";

   -^

[18:13:18] Finished 'sass' after 5.64 ms

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。