I'm gradually adding polymer components to an existing application that
makes heavy use of LESS files and have found a bit of a 'pain' point.
We have a LESS file that contains a lot of theme style declarations
(colours, font sizes etc.), this file is then included in various other
LESS files where necessary.
One of the polymer components I'm using is the progress bar, and I wish to
change the 'active' colour to match a colour defined in one of our LESS
files. Initially I did this the 'wrong' way by forcing the background
colour of element used in the progress-bar to the value I want via standard
LESS/CSS ie.
paper-progress {
#activeProgress {
background-color: @hilite-blue !important;
}
}
This worked OK, but obviously when Shadow DOM finally becomes the norm my
custom styling would end up being broken.
I've now investigated styling it the 'correct' way using a custom style
import (as described here
https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style).
This works perfectly and should (I hope) be future proof.
The problem I have is that I now have to declare my style constants in two
different places, the LESS file and the custom style .html file. This could
cause maintenance issues if the colours aren't both changed at the same
time.
What would be ideal is if there was a way of 'importing' CSS declarations
into the custom styling file from an external resource. This would allow
LESS/SASS to be used to create the CSS portion of the custom style file.
Any thoughts on this, or suggestions as to how integration with existing
styling could be handled in a better way?
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/993af31e-cb06-4e85-932c-eecc9c460c78%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
