Customize portal - variable/helper names

[taaza]

Hi there, I’m trying to customize the portal styling. I’ve read some documentation around theme customization such as Custom Style Magic, Complete Layout Customization, and Palettes and Hex Codes.

I understand we can overwrite CSS and the layouts of each page. But is it possible to prevent hard-coding when it comes to setting background colors, tab colors, portal fonts, link color, etc?

Do we have the ability to refer to these settings when we write the CSS. So for example, instead of overwriting

.help-center {
    background-color: #f3f5f7;
    color: #183247;
    border-bottom: 1px solid #DADFE3;
}

Is there a way to code the CSS in a way where we can refer to the variables on the Color & font tab like example below? I’m just making this up since I’m not sure if it’s possible.

.help-center {
    background-color: $portal.background-color;
    color: $portal.base-color;
    border-bottom: 1px solid $portal.border-color;
}

Thank you in advance!