$borderStyle: 1px solid rgb(232,232,232);
$mainPad: 20px;

.App {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.App__topbar {
    height: 40px;
    flex: 0 0 auto;
    border-bottom: $borderStyle;
    padding: 0 $mainPad;
}

.App__content {
    flex-grow: 1;
    display: flex;
}
.App__sidebar {
    flex: 0 0 auto;
    height: inherit;
    width: 220px;
    border-right: $borderStyle;
    overflow: auto;
    padding: $mainPad;
}
.App__main {
    height: inherit;
    flex-grow: 1;
    overflow: auto;
    background-color: #f1f1f1;
    padding: $mainPad;
}

:root {
    --borderStyle: 1px solid rgb(232,232,232);
    --mainPad: 20px;
}

.App {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.App__topbar {
    height: 40px;
    flex: 0 0 auto;
    border-bottom: var(--borderStyle);
    padding: 0 var(--mainPad);
}

.App__content {
    flex-grow: 1;
    display: flex;
}
.App__sidebar {
    flex: 0 0 auto;
    height: inherit;
    width: 220px;
    border-right: var(--borderStyle);
    overflow: auto;
    padding: var(--mainPad);
}
.App__main {
    height: inherit;
    flex-grow: 1;
    overflow: auto;
    background-color: #f1f1f1;
    padding: var(--mainPad);
}

Fix using variables in CSS
Fix using variables in CSS
