scss 1：Nで変数を管理するSCSS

Posted 2021-05-18

$icons: (
    message:    (40, 40),
    philosophy: (50, 50),
    service:    (40, 40),
    place:      (40, 40),
    comapny:    (40, 40),
    csr:        (45, 45),
    news:       (40, 40),
    recruit:    (40, 40),
    contact:    (40, 40),
    policy:     (40, 40),
    sitemap:    (40, 40),
);

@each $name, $icon in $icons {

	$icon-width: nth($icon, 1);
	$icon-height: nth($icon, 2);

	&-#{$name} {
		background-image: url(../img/common/other/bg_#{$name}01.jpg);
		a:before {
			content: "";
			position: absolute;
			z-index: 1;
			display: block;
			background-image: url(../img/common/other/ico_#{$name}[e-mail]);
			background-size: cover;
			width: $icon-width+px;
			height: $icon-height+px;
			margin: 0 auto;
			left: 0;
			right: 0;
			top: 50px;
		}
	}
}