是的,我也试试这个。
我尝试的第一件事是为每个组件创建一个样式文件并使用 sass @extends 来制作每个组件样式,我的目标是抽象 zurb,所以如果我想更改主题或 css 框架,我只需要更改 sass文件。
但是 zurb-foundation 依赖于一个必须包含的基本文件,我不能只为按钮创建一个文件,因为基础中的 de 按钮依赖于主文件中设置的变量,这会生成一个带有冗余的巨大文件每个组件的 css。
我尝试的第二件事是扭曲基本组件,比如按钮,让我们说一个
<x-button></x-button>
然后在我的 sass 文件中包含 zurb 按钮文件,并使 x-button @extends .button 或 @include .button 使按钮和 x-button 具有相同的外观。这适用于基本元素。
另一种方法是applyAuthorStyles,让css泄露
我不确定什么是最好的方法,因为每种方法都有其缺陷。
为什么要包装基本组件?有共同的行为和API。例如:在表单中启用和禁用组件。我在聚合物中的所有基本组件(x-button、x-input 等)都从我的框架类扩展而来,在这个框架类中,我有共同的行为启用和禁用,所以我可以使用相同的 API 来启用和禁用组件。
这是一项进展缓慢的工作,更多的是为了好玩,我停止了这项工作,因为我需要花更多的时间来创建应用程序而不是创建框架。不幸的是,没有像 ExtJs 和 Dojo 这样的 JavaScript 那样好的 Dart 组件框架。
但想法是制作一个组件集(具有共同行为)并使用 sass 框架来获得视觉效果,也许可以将 css 框架抽象为一种可以插入并改变应用程序外观和感觉的方式,那就是不容易,因为有些组件有特定的 html 标记