Using Javascript Variables with styled-components
I eventually figured this out, so here's how you can do it, at least if using React.
You need to define the variables in one file and export them.
// Variables.js
export const FONTSIZE_5 = '20px';
Then you need to import those variables into each component file.
// Button.js
import * as palette from './Variables.js';
Then you can use the variables in your styled-components like this:
const Button = styled.button`
font-size: ${palette.FONTSIZE_5};
`;
Wrapping a <ThemeProvider>
around your application may help:
https://www.styled-components.com/docs/advanced#theming
const theme = {
fontColour: 'purple'
}
render() {
return (
<ThemeProvider theme={theme}>
<MyApplication />
</ThemeProvider>
)
}
That will give all child styled-components access to the theme like so:
const MyApplication = styled.section`
color: ${props => props.theme.fontColour}
`
Or
const MyFancyButton = styled.button`
background: ${props => props.theme.fontColour}
`
Or access the theme via https://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components