[CSS] SCSS @for 반복문으로 순위 숫자 리스트에 삽입하기

 

 

상품 판매 순위를 list에 1,2,3,4 하드코딩 하거나 스크립트 처리 하지 않고

SCSS의 반복문을 이용하여 가상요소로 삽입하는 방법

 

 

위와 같이 작은 원 안에 숫자를 순차적으로 넣어야 할 때 사용할 수 있다.

 

@for 변수 from 시작숫자 through 끝 숫자 를 선언하고 중괄호로 감싸준다. {}

그리고 가상요소의 content에 #{$i}를 사용해 숫자를 적용해주면 된다.

 

내부에 숫자를 텍스트로 넣지 않고 별도로 배열을 선언해서 적용하는 방법은 검색하면 다수 나오는데

이렇게 순서를 순차적으로 적용하는 방법이 없어 공유한다.

 

 

ul {
   li{
   position: relative;
        //순위 표시
        //$i라는 변수가 1부터 10까지 (순위를 표시할 것이 더 많다면 10을 더 늘려주면 된다)
        @for $i from 1 through 10 {
           //li를 nth-child로 순차적으로 적용해준다.
           //li 위에 가상요소로 띄워주기 때문에 li에 position relative가 선언되어야 한다.
            &:nth-child(#{$i})::before {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 27px;
                height: 27px;
                top: 8px;
                left: 8px;
                border-radius: 50%;
                background: blue;
                color: white;
                font-weight: bold;
                font-size: 16px;
                //순차적으로 숫자 텍스트 삽입
                content: '#{$i}';
                z-index: 1;
            }
        }
    }
}