Question

在使用 Foundation 构建的网站上，我希望能够在包编译期间处理完 SASS 后动态设置调色板。

CSS 变量似乎是最好的选择。

虽然这适用于基本情况，但我在将这种方法应用于 Foundation 调色板时遇到了问题，因为它使用的颜色函数与 CSS 变量不能很好地配合：

SassError: $color: var(--primary-color) is not a color.
   ╷
21 │   $rgba: red($color), green($color), blue($color);
   │          ^^^^^^^^^^^   
   ╵
  node_modules/foundation-sites/scss/util/_color.scss 21:10          color-luminance()        
  node_modules/foundation-sites/scss/util/_color.scss 45:16          color-contrast()         
  node_modules/foundation-sites/scss/util/_color.scss 66:14          color-pick-contrast()    
  node_modules/foundation-sites/scss/components/_button.scss 190:13  button-style()
  node_modules/foundation-sites/scss/components/_button.scss 169:5   button-fill-style()
  node_modules/foundation-sites/scss/components/_button.scss 378:13  foundation-button()
  node_modules/foundation-sites/scss/foundation.scss 112:3           foundation-everything()  
  src/scss/index.scss 4:1

因此，理想情况下，我会更改 button-style 混合函数以使用不使用 color-pick-contrast() 的方法，因为此函数不适用于变量。

撇开button-style 所需的具体更改不谈，出现了一般性问题：

我该如何进行更改？

button-style 是 Foundation 代码库的一部分，在 Foundation 之上维护补丁集似乎不太吸引人。

那么有什么办法可以让我从我的代码中对 Foundation 的 button-style 进行猴子补丁，并使其以可维护的方式工作？

猴子补丁 SASS/SCSS

0 个答案: