使用常量编辑器 TYPO3 更改 css 颜色变量

Question

我目前在 typo3 上有多个站点，我想建立一个系统来通过常量编辑器更改每个站点的颜色。

为此，我在 CSS 文件上创建了颜色变量，例如：

root {
  --first: # 007bff;
  --second: # 6610f2;
}

这是我如何设置的：

我的常量文件：

skin {

    # customsubcategory = site = Param Site
    site {
        # cat = skin / site / 1; type = string; label = title detail news
        newsSuffixHeadTitle = Poppy

        # cat = skin / site / 2 type = color; label = first color
        firstcolor = var (--first)

         # cat = skin / site / 3 type = color; label = second color
         secondcolor = var (--second)
    }

我的设置文件：

page.cssInline.10 = TEXT
page.cssInline.10.value (
.theme1 .container-nav .content-nav .theme1 .container-nav .menu-responsive {background: {$ skin.site.firstcolor}}

.theme1 .container-carousel-communes .b-title-item h3 {color: $ skin.site.secondcolor})

在常量编辑器上，我使用 var (--first) 和 var (--second) 在 css 上应用我的 colors，但是在我看来这不是一个好方法

我希望我可以直接通过常量编辑器选择colors，但是我对此不太了解，请问您有什么想法吗？

谢谢

Answer 1

您无法从 TYPO3 常量访问 CSS 常量。 CSS constants actually only work with extensions like SCSS or SASS, and are only used when compiling extended CSS to CSS.

将您的值直接分配给 TYPO3 常量，如下所示：

skin {

    # customsubcategory = site = Param Site
    site {
        # cat = skin / site / 2 type = color; label = first color
        firstcolor =  #007bff;

         # cat = skin / site / 3 type = color; label = second color
         secondcolor = #6610f2;
    }

我猜#后面应该没有空格。