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

지원
1

안녕하세요,

커스텀 테마를 만드는 첫 시도이므로 너그럽게 봐주시면 감사하겠습니다.

카테고리 목록 페이지를 커스터마이징하려고 하는데, 다음과 같은 모습으로 만들고 싶습니다:

image
image614×319 40.7 KB

좌측 테두리를 제거하고 "필(pills)"을 추가하는 것이 아이디어입니다.
필을 추가하는 SCSS는 꽤 간단합니다:

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

    &::after {
        content: "";
        width: 20px;
        height: 80%;
        position: absolute;
        background-color: red;
        border-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
}

하지만 여기에서 사용 가능한 카테고리 색상(discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub)에 접근할 수 없습니다.

image
image610×176 10.2 KB

CSS에서 해당 색상에 접근하는 쉬운 방법이 있을까요?

2

현재는 이를 쉽게 수행할 수 있는 방법이 없습니다.

인라인으로 설정하는 대신 이러한 색상을 CSS 커스텀 프로퍼티로 이동하면, 모든 CSS/SCSS에서 색상에 쉽게 접근할 수 있게 됩니다. 언제 이를 진행할 수 있을지는 모르겠지만, 할 일 목록에 올려두겠습니다.

3

정말 멋질 것 같아요 :slight_smile:
그리고 혹시 제가 원하는 뷰를 구현할 다른 방법이 있을까요?
Discourse의 특정 부분에 대한 템플릿을 오버라이드할 수 있다는 것을 읽었는데, 커스텀 테마에서 어떤 템플릿 파일을 오버라이드해야 하고 어떻게 해야 하는지 궁금합니다.

4

현재 제가 사용하고 있는 임시 해결책은 components/parent-category-row 템플릿을 오버라이드하는 것입니다.
다음과 같이 추가적인 div 요소를 추가하고 있습니다:

{{#unless noCategoryStyle}}
<div class="pill" style="background-color:#{{category.color}}"></div>
{{/unless}}

image
image1153×653 49 KB

미래에 변경될 수 있으므로 템플릿을 오버라이드하는 것을 피하고 싶습니다.

@awesomerobot 카테고리 색상에 접근할 수 있는 내장 방식이 있다면 좋겠습니다 :slight_smile:

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를 오버라이드하는 단계는 건너뛸 수 있습니다.