Scssで連想配列を扱う

<dl>
  <dt class="atlassian">Atlassian</dt>
  <dd>アトラシアン (Atlassian) は、オーストラリアのシドニーに本社を置くソフトウェア</dd>
</dl>
<dl>
  <dt class="windows">Windows</dt>
  <dd>Microsoft Windows（マイクロソフト ウィンドウズ）は、マイクロソフトが開発・販</dd>
</dl>
<dl>
  <dt class="swift">Swift</dt>
  <dd>Swift（スウィフト）は、アップルのiOSおよびmacOS､Linuxで利用出来るプログ</dd>
</dl>
<dl>
  <dt class="react">React</dt>
  <dd>React（リアクト）は、Facebookとコミュニティによって開発されているユーザイン</dd>
</dl>
<dl>
  <dt class="apple">Apple</dt>
  <dd>アップル（英: Apple Inc.）は、アメリカ合衆国カリフォルニア州に本社を置く、イン</dd>
</dl>
<dl>
  <dt class="android">Android</dt>
  <dd>Android（アンドロイド）は、Googleが開発したモバイルオペレーティングシステ</dd>
</dl>

// アイコンの名称と高さ、横幅の情報を持たせてあげる.
$icons: (
    atlassian: (
        height: 24,
        width: 26
    ),
    windows: (
        height: 24,
        width: 26
    ),
    swift: (
        height: 21,
        width: 24
    ),
    react: (
        height: 24,
        width: 28
    ),
    apple: (
        height: 27,
        width: 22
    ),
    android: (
        height: 32,
        width: 28
    )
);

dl {
    dt {
        @each $icon, $sizes in $icons {
            &.#{$icon}:before {
                background-image: url(../images/ico--#{$icon}.svg);
            }

            @each $vh, $size in $sizes {
                &.#{$icon}:before {
                    #{$vh}: #{$size}px;
                }
            }
        }

        &:before {
            background-size: cover;
            content: '';
        }
    }
}