SASS/CSS Code Design - Question on custom theme

Flow
1

Hi there,

i am trying to create a own theme. To be excact, i just want to customize a the.
There for i read the tutorials in the book and got to work.
I am using sass like in this tutorial:https://vaadin.com/wiki/-/wiki/Main/Creating%20a%20theme%20using%20sass

For now i am fine and i got the hole thing up to work and the tree looks as i want.
But for now there a for example a v-tree css tag which has a background in the rendeer design. In my design i now have to say background: none; and i have to reset all the other stuff.

Is there a way to import a theme like rendeer with all stuff, but without all v-tree css-tags ? That i don’t have to reset all the previous elements which are set by the rendeer theme.

2

I don’t think that this is possible but i also think that it wouldn’t be a good idea to do that in the first place because when removing all classes with v-tree in its name you are left with a vertical list without arrows or anything. So you would have to work at least 10 times longer to create your tree from nothing then overriding just the css you want to be changed.

You can have a look how it would look if you go to your app or any other vaadin app with reindeer style (e.g sampler) and then remove the v-tree classes in the css inside a Browser Development Tool.

3

Ok thanks, but i thought abouter performance.
The Browser who have to interpret the css, needs to interpret all v-tree classes and not just mine.

4

The only way i could think of how you could avoid “unnecessary” css would be to copy all css from the reindeer css into your own custom style.(s)css and not import it. Then you can remove or modify the classes you want.
There might be a better way to do this but from my css-knowledge (which is not that huge i might add) and a quick google search didn’t really give me anything. Also it seems like such a mechanism would be to complex and difficult to use to be worth the few “unnecessary bytes” the client won’t get.

5

An old thread, but in case still of interest to someone: as noted under the “One more thing” in the wiki article above, one can copy the part of reindeer that imports and includes the mixins for each component, and just remove the @include line for the components that should be left out. Sass will then leave it out from the generated CSS.

On the other hand, I believe the performance impact on the browser side will be minimal if e.g. just overriding some rules for one component. The impact in network transfer time might be a bit bigger if excluding large parts of a theme, but still small and the theme is cached on the browser after the first time the application is loaded.