Menu
I have the following tag with a hard-coded color:
<p style={{ color: '#646464' }}>
I want to use a LESS variable that I've defined instead, let's called it @tertiary-col, how would I use this variable? <p style={{ color: '@tertiary-col' }}> doesn't seem to work
915
Because less is a great tool to compile css in a programming way and css variable has the feature of dynamtic value and is a good way to switch theme. It's true that is less can't use css variables in less function.
As a rule of thumb for our team at Finnovate.io, if a React component has more than 200 lines of code, then it is too big. Big components are difficult to read, difficult to maintain and nearly impossible to unit test.
Static variables can be used within React classes, just like other different kinds of variables can access it. Still, the difference is that the scope of the variables can be modified for static variables, and it cannot be modified. For example, if you use a static or fixed value, it can be declared and used.
It is possible to use native var() to do this.
By placing the variable in :root then it becomes available anywhere you need to use it.
You would do --tertiary-col: @tertiary-col;, but for the purposes of the snippet I have put in an actual hex value.
:root {
--tertiary-col: @tertiary-col; /* this is what you would do */
--tertiary-col: #646464; /* @tertiary-col; */
}<p style="color: var(--tertiary-col)">Some text</p>Here is an excellent tutorial on css variables: https://codepen.io/abcretrograde/full/xaKVNx/
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
