Sass（scss）にて for 文（each）と配列、連想配列（map）を扱う

配列 + each サンプルコード

• list - Sass
• sass:list - Sass

@use "sass:list";

$numbers: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten";

@each $number in $numbers {
	$i: list.index($numbers, $number);
	// $i: index($numbers, $number);
	.#{$number} {
		width: $i * 10%;
	}
}

ビルド

.one {
  width: 10%;
}

.two {
  width: 20%;
}

.three {
  width: 30%;
}

.four {
  width: 40%;
}

.five {
  width: 50%;
}

.six {
  width: 60%;
}

.seven {
  width: 70%;
}

.eight {
  width: 80%;
}

.nine {
  width: 90%;
}

.ten {
  width: 100%;
}

以下抜粋

配列

$numbers: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten";

インデックス（i）を取得する

@use "sass:list";
$i: list.index($numbers, $number);

or

$i: index($numbers, $number);

連想配列（map） + each サンプルコード

• list - Sass
• Maps - Sass
• sass:map - Sass

@use "sass:map";

$colors: (
	"black": #000,
	"white": #fff,
);

body {
	background: map.get($colors, "white");
	// background: map-get($colors, "white");
}

@each $key, $value in $colors {
	.#{$key} {
		color: $value;
	}
}


$paddings: "padding", "padding-top", "padding-left", "padding-bottom", "padding-right";
$padding-sizes: (
	"small": 1px,
	"medium": 2px,
	"large": 3px,
);

@each $padding in $paddings {
	.#{$padding} {
		@each $key, $value in $padding-sizes {
			&-#{$key} {
				#{$padding}: $value;
			}
		}
	}
}

ビルド

body {
  background: #fff;
}

.black {
  color: #000;
}

.white {
  color: #fff;
}

.padding-small {
  padding: 1px;
}
.padding-medium {
  padding: 2px;
}
.padding-large {
  padding: 3px;
}

.padding-top-small {
  padding-top: 1px;
}
.padding-top-medium {
  padding-top: 2px;
}
.padding-top-large {
  padding-top: 3px;
}

.padding-left-small {
  padding-left: 1px;
}
.padding-left-medium {
  padding-left: 2px;
}
.padding-left-large {
  padding-left: 3px;
}

.padding-bottom-small {
  padding-bottom: 1px;
}
.padding-bottom-medium {
  padding-bottom: 2px;
}
.padding-bottom-large {
  padding-bottom: 3px;
}

.padding-right-small {
  padding-right: 1px;
}
.padding-right-medium {
  padding-right: 2px;
}
.padding-right-large {
  padding-right: 3px;
}

以下抜粋

連想配列（map）

$colors: (
	"black": #000,
	"white": #fff,
);

$padding-sizes: (
	"small": 1px,
	"medium": 2px,
	"large": 3px,
);

key から value を取得する

@use "sass:map";
body {
	background: map.get($colors, "white");
}

or

body {
	background: map-get($colors, "white");
}