@at-root 여러번 사용

scss에서 @ at- root 를 사용하면서 불편했던 점은 동일한 스타일을 쓰는데 @ at-root를 중복나열하여 사용할 수 없어 아래 코드와 같이 사용하고 싶으나 사용할 수 없습니다.

그럴 때 아래와 같이 사용할 수 있습니다.

//아래와 같이 사용 못함
.test_wrap{
    @at-root .join_coupon &,@at-root .identical_product &{
        top: 50%;
        transform: rotate(45deg) translateY(-50%);
    }
}
//scss 속성을 사용하여 처리 가능
.test_wrap{
    @at-root #{selector-nest(".test1,.test2","#{&}")}{
        top: 50%;
        transform: rotate(45deg) translateY(-50%);
    }//.test1 .test_wrap, .test2 .test_wrap
}

사용한 속성 : https://sass-lang.com/documentation/modules/selector