Sassを使ってnth-childを省略して書く方法

実現したいこと

画像をコンテナの右上に少しずつずらして表示したい
各画像に icon:nth-child(1) icon:nth-child(2) ... と書くのはシンプルじゃない。

まずはVue.jsで画像を表示

index.vue

<template>
  <section class="fruit">
    <div class="fruit__container">
      <img
        v-for="(item, i) in items"
        :key="`fruit__container-key-${i}`"
        :src="item.url"
        :alt="item.title"
        class="fruit__container__icon"
      >
      本文
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: "apple", url: "https://placehold.jp/150x150.png" },
        { title: "banana", url: "https://placehold.jp/150x150.png" },
        { title: "orange", url: "https://placehold.jp/150x150.png" },
        { title: "peach", url: "https://placehold.jp/150x150.png" },
        { title: "grape", url: "https://placehold.jp/150x150.png" }
      ]
    };
  }
};
</script>

Sassを書いていく

style.scss

.fruit {
  background-color: #afeeee;
  padding: 50px 0;
  color: #fff;

  &__container {
    background-color: #fff;
    position: relative;
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 15px;

    &__icon {
      position: absolute;
      top: -15px;
      width: 32px;
      height: 32px;
      margin-right: 5px;
      border: 1px solid #fff;
      border-radius: 50%;
    }
  }
}

この状態では各画像が重なっており１つしか見えていません。
各画像に対して nth-child を使って右にずらしてあげましょう。

nth-childとfor文で画像をずらす

style.scss

.fruit {
  &__container {
    &__icon {
      //（略）
    }

    // アイコンを右からpositionsの位置に配置
    $positions: (5, 25, 44, 65, 85);

    @for $index from 1 through length($positions) {
      &__icon:nth-child(#{$index}) {
        right: #{nth($positions, $index)}px;
      }
    }
  }
}

$positions で各画像の位置を書きます。
for文の意味は日本語に直してあげるとわかりやすいです。

• @for $index （$indexを繰り返す）
• from 1 through （1から）
• length($positions) （$positionsのlengthだけ）

なので、 @for の中では $index が1, 2, 3, ...と繰り返されています。
それを利用して nth-child に指定してあげます。

例えば、$index が 2 のときは。。

このように変換されます！
&__icon:nth-child(#{$index}) → &__icon:nth-child(2)
right: #{nth($positions, $index)}px; → right: 25px;

変数をセレクタやプロパティ名にしたいときは #{} で囲います。
nth($n) はSassの関数で、指定した数($n)の要素を取り出すことができます。

まとめ

Sassの関数を使うことで可読性が下がるという意見も聞きますが、
今回のように細かい微修正は　for文で書いた方がシンプルになり個人的には好きです！