SCSS에서 카테고리 색상에 접근하는 방법

지원
5

@tjot,

::after 의사 요소의 테두리를 이용해 CSS 해킹을 통해 원하는 효과를 낼 수 있습니다.

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    > h3:first-child {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        
        &::after {
            content: "";
            width: 0px;
            height: 70%;
            position: absolute;
            border-radius: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: inherit;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }        
    }
}

image
image1080×738 130 KB

인라인 스타일이 적용된 td의 직접적인 자식 요소이기 때문에 제목의 h3 요소에 스타일을 직접 적용했다는 점에 유의하세요. 따라서 템플릿에서 해당 인라인 스타일이 제거되면 CSS를 조정해야 합니다.

원하신 대로 components/parent-category-row를 오버라이드하는 단계는 건너뛸 수 있습니다.