SCSS 가상요소 동적 설정값 JS로 읽어들이기

card wrapper 내에 card들이 있는데, 각 card에 대해 비번호가 지정되기를 원했다.

js로도 구현 가능했지만 추가/삭제 시에도 건너뛰는 번호가 없기를 바랐고,
삭제 시마다 리플로우를 발생시키고 싶지도 않았기에 css를 사용해서 번호를 지정해 주었다.

그리고 삭제 버튼 클릭 시 비번호를 이용해 'n번 템플릿을 삭제하시겠습니까' 라고 확인하고 싶었기에 다음 코드를 이용해 값을 가져오고자 했다.

  const label = card.querySelector('label');
  const pseudoStyle = window.getComputedStyle(label, '::after');
  const contentValue = pseudoStyle.getPropertyValue('content');

 

처음에는 이런 식으로 scss를 작성했다.

.card_wrapper {
  .card {
    counter-increment: card;

    label {
      &::after {
        content: count(card)
      }
    }
    }

이 경우 위 코드 결과값은 count(card)였다.

계산된 숫자 값을 값으로 가지고 있는 것이 아니라 그런 것이다.

 

이후 다음과 같이 변경했다.

@for $i from 1 to 11 {
  .card_wrapper:nth-child(#{$i}) label::after {
    content: '#{$i}';
  }
}

 

정상적으로 비번호를 불러오는 데 성공했다.

contentValue는 JSON 형식의 숫자이므로 JSON.parse(contentValue) 식으로 사용해 주었다.