update 2016/03/14: :root isn't a very good idea; we should just rely on JS vars instead.
update 2016/11/16. scratch that, :root in moderate usage is a great idea, as long as a postprocessor can handle it (which it can now)
What do you think of making :root elements the transport for variables and such? Root would never be prefixed, and passed down to child elements so they can read values from it during compilation. Perhaps we should also do this for @custom-media selectors so breakpoints are passed down too? (example)
Opinions?
client-main.js
const sf = require('sheetify')
sf`
:root {
--color-bg-primary: blue;
}
`
require('./client-sidebar')
client-sidebar.js
const sf = require('sheetify')
sf`
:host > h1 {
background-color: var(--color-bg-primary);
}
`
update 2016/03/14:
:rootisn't a very good idea; we should just rely on JS vars instead.update 2016/11/16. scratch that,
:rootin moderate usage is a great idea, as long as a postprocessor can handle it (which it can now)What do you think of making
:rootelements the transport for variables and such? Root would never be prefixed, and passed down to child elements so they can read values from it during compilation. Perhaps we should also do this for@custom-mediaselectors so breakpoints are passed down too? (example)Opinions?
client-main.js
client-sidebar.js