How can I inherit a style across multiple fields of an object? - css

Question

I have an object called typography with some styles and it turned out that in each case the property line-height is equal to 135%. As it happens in life, it will probably change so I would like to avoid the change in many places and create some object field or something like that to inherit it. This is piece of my current object.
const typography = {
globalStyles: `
font-family: Lato;
font-style: normal;
color: #000000;`,
header: {
XXL: `
font-weight: normal;
font-size: 37px;
line-height: 135%;`,
XL: `
font-weight: normal;
font-size: 33px;
line-height: 135%;`,
L: `
font-weight: normal;
font-size: 29px;
line-height: 135%;`,
M: `
font-weight: normal;
font-size: 25px;
line-height: 135%;`,
S: `
font-weight: normal;
font-size: 21px;
line-height: 135%;`,
bold: {
...
},
},
body: {
...
}
}
I have tried to solve this by creating property lineHeight:line-height: 135%; and trigger it using spread operator ...this.lineHeight but it didn't work. Code below:
const typography = {
lineHeight: `line-height: 135%;`,
globalStyles: `
font-family: Lato;
font-style: normal;
color: #000000;`,
header: {
XXL: `
font-weight: normal;
font-size: 37px;
...this.lineHeight`,
XL: `
font-weight: normal;
font-size: 33px;
...this.lineHeight`,
L: `
font-weight: normal;
font-size: 29px;
...this.lineHeight `,
M: `
font-weight: normal;
font-size: 25px;
...this.lineHeight`,
S: `
font-weight: normal;
font-size: 21px;
...this.lineHeight`,
bold: {
...
},
},
body: {
...
}
}
Please about any help!

Answer 1

Your styles are actually only strings and you are already using template strings. So you can just leverage that and extract the value for line-height into it's own variable outside like this:
const lineHeight = '135%'; // Your extracted lineHeight
const typography = {
globalStyles: `
font-family: Lato;
font-style: normal;
color: #000000;`,
header: {
XXL: `
font-weight: normal;
font-size: 37px;
line-height: ${lineHeight};`, // Use the lineHeight inside your string template
XL: `
font-weight: normal;
font-size: 33px;
line-height: ${lineHeight};`,
L: `
font-weight: normal;
font-size: 29px;
line-height: ${lineHeight};`,
M: `
font-weight: normal;
font-size: 25px;
line-height: ${lineHeight};`,
S: `
font-weight: normal;
font-size: 21px;
line-height: ${lineHeight};`,
bold: {
...
},
},
body: {
...
}
}

Answer 2

I think you can just use the property em for this.
em Takes the font-size of the parent element and you can double it with 2em as example.
So your code would look like this:
font-weight: normal;
font-size: 37px;
line-height: 1.35em;
In this case it would multiply 37 * 1.35.
I hope this is the thing you asked for.