我的客户正在使用Vaadin开发Web应用程序，并希望我根据Vaadin 7.3中现有的Valo主题为项目创建一个新主题。 我知道HTML和CSS（SCSS）以及一些jQuery，但就是这样，我是一名网页设计师，编程技巧非常有限（如果有的话）。我试图了解Vaadin如何工作以及如何创建新主题，但我对如何开始有点迷失。我曾尝试在互联网上阅读“vaadin”和其他资源，但我很难过，因为我不懂Java，而且大多数都是为程序员而不是设计师编写的。
任何人都可以向我解释Vaadin中的主题原则吗？ 我可以改变什么以及Java控制什么？ 我的CSS会被Java覆盖吗？我在哪里可以更改/禁用此类行为？ 我在哪里可以找到vaadin中可用的css规则/类列表？ 你知道设计师的任何Vaadin资源吗？
答案 0 :(得分：0)
使用vaadin，您无需了解用于创建/修改主题的java。 Vaadin 7使用SASS来简化CSS管理。 它要求您了解sass，互联网上有许多教程，例如this one。
起点是vaadin和this link本身的web page for the valo theme。 在demo page上，您可以看到valo中可用/样式化的组件。
如果您希望在css术语中查看样式的valo，请查看vaadin-themes-7.3.5.jar文件。 在文件夹VAADIN \ themes \ valo \ components中，您将看到每个组件的scss文件。在那里你还可以看到可以用于sass编译的变量。
从scss定义生成CSS文件的步骤通常在vaadin的构建步骤中自动完成。
答案 1 :(得分：0)
valo的美妙之处在于，通过玩主题变量，这是一个高度可定制的主题。 这意味着你可以通过
中的一些简单修改来改变它的外观<强>的WebContent \ VAADIN \主题* appname中** appname中* .scss
在同一个文件中，您当然可以添加自己完全独立的样式。 组件设置为使用他们的＆＃34; valo样式＆＃34;默认情况下。然后，您可以决定添加或删除一些组件。 ValoTheme 类中的组件已经有一些内置的自定义功能，例如 ValoTheme.BUTTON_DANGER 将呈现正常的Valo按钮，但颜色设置在变量中$ v-误差指示器色
在同一文件夹中，应使用 styles.scss 导入您可能需要的最终子scss。这用于为您的应用程序样式添加[ appname - ]前缀，以便它们不与其他样式名称冲突。
styles.css 是应用将使用的实际css文件，您必须＆＃34; 编译主题＆＃34;更新它
单独使用addons.scss，因为它是用于内部框架的。
良好的起点是
https://vaadin.com/book/-/page/themes.valo.html章
https://vaadin.com/wiki/-/wiki/Main/Valo+Examples（一些Valo准备好的自定义项，你会看到整个应用程序的调整变化很少;你可以在Valo示例中看到它们，甚至可以在Vaadin采样器中看到它们）
好造型！此致