使用常量編輯器 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;
    }

我猜#后面應該沒有空格。