# 在 SCSS 中访问类别颜色

**URL:** <https://meta.discourse.org/t/access-category-color-in-scss/203501>\
**Category:** Support\
**Tags:** pr-welcome\
**Created:** [2021年九月14日 11:00 UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501 "2021-09-14T11:00:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tjot](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tjot](https://meta.discourse.org/u/tjot)\
**Post date:** [2021年九月14日 11:00 UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501/1 "2021-09-14T11:00:03Z")

</div>

你好，

这是我第一次尝试创建自定义主题，还请多多包涵。

我试图自定义分类列表页面，使其看起来像这样：

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/e/2edc1fabc07e22813dd2d73a649ffbbb6b70a4d1.png)

想法是移除左侧边框并添加“药丸”样式。  
添加“药丸”样式的 SCSS 非常简单：

```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](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/views/categories/index.html.erb#L13)

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/e/ae53b1adfd5323ea1966e9912c5c2078a3dc53cc.png)

是否有简单的方法可以从 CSS 中访问该颜色？

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2021年九月14日 14:03 UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501/2 "2021-09-14T14:03:32Z")

</div>

> [@tjot](#):
>
> 有没有简单的方法可以从 CSS 中访问该颜色？

目前还没有简单的方法来实现这一点。

我们可以将这些颜色移动到 CSS 自定义属性中，而不是内联设置它们，这样在任何 CSS/SCSS 中都可以轻松访问这些颜色。我不确定我们何时能着手处理这个问题，但我会将其列入待办事项清单。

---

<div class="post-metadata">

**Author:** ![tjot](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tjot](https://meta.discourse.org/u/tjot)\
**Post date:** [2021年九月16日 06:35 UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501/3 "2021-09-16T06:35:33Z")

</div>

那太棒了 🙂  
顺便问一下，还有其他方式可以实现我想要的视图吗？  
我读到可以为 Discourse 的特定部分覆盖模板，我需要覆盖哪个模板文件，以及如何在自定义主题中完成这一操作？

---

<div class="post-metadata">

**Author:** ![tjot](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tjot](https://meta.discourse.org/u/tjot)\
**Post date:** [2021年九月17日 11:45 UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501/4 "2021-09-17T11:45:08Z")

</div>

我目前的解决方法是覆盖 `components/parent-category-row` 模板。  
我像这样添加了一个额外的 div 元素：

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

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/5/85f40008e16c55c14ab453b536564ffbf55ed84f.png)

我希望避免覆盖模板，因为它们将来可能会发生变化。

@awesomerobot 如果能有一种内置方式来访问类别颜色那就太好了 🙂

---

<div class="post-metadata">

**Author:** ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)\
**Post date:** [2022年一月7日 13:01 UTC](https://meta.discourse.org/t/access-category-color-in-scss/203501/5 "2022-01-07T13:01:17Z")

</div>

@tjot,

可以通过 `::after` 伪元素的边框来实现您想要的效果的 CSS 技巧。

```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](https://global.discourse-cdn.com/meta/original/3X/f/a/fa78ed4dd01133465bd6db8dfcc6a384ea5fdc2e.png)

请注意，我已将样式直接应用于标题的 `h3` 元素，因为它是在应用了内联样式的 `td` 的直接子元素。因此，如果模板将来移除它，您将不得不调整您的 CSS。

但是，您可以跳过覆盖 `components/parent-category-row`，正如您想要的。