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%;
    }
  }
}

이 상태에서는 각 화상이 겹쳐져 있어 1개 밖에 보이지 않습니다.
각 이미지에 대해 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문으로 쓴 편이 심플해져 개인적으로는 좋아합니다!