How to override scss variables correctly? - sass

Question

I have the following scss which sets tooltip arrow direction. The size of the tooltip is a variable that I would like to override when the .tooltip-large class is present. For whatever reason the 12px value is being used regardless of the class. What might I be doing wrong here?
<div class="tooltip-arrow tooltip-arrow-up">This tooltip arrow should be 6px</div>
<div class="tooltip-arrow tooltip-arrow-up tooltip-large">This tooltip arrow should be 12px</div>
.tooltip-arrow {
$triangleSize: 6px;
&.tooltip-large {
$triangleSize: 12px;
}
&::after {
content: '';
display: block;
height: 0;
width: 0;
position: absolute;
}
&-down::after {
border-left: $triangleSize solid transparent;
border-right: $triangleSize solid transparent;
border-top: $triangleSize solid mat-color($background, tooltip);
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
}
&-up::after {
border-left: $triangleSize solid transparent;
border-right: $triangleSize solid transparent;
border-bottom: $triangleSize solid mat-color($background, tooltip);
top: 0;
left: 50%;
transform: translate(-50%, -100%);
}
&-left::after {
border-top: $triangleSize solid transparent;
border-bottom: $triangleSize solid transparent;
border-right: $triangleSize solid mat-color($background, tooltip);
left: 0;
top: 50%;
transform: translate(-100%, -50%);
}
&-right::after {
border-top: $triangleSize solid transparent;
border-bottom: $triangleSize solid transparent;
border-left: $triangleSize solid mat-color($background, tooltip);
right: 0;
top: 50%;
transform: translate(100%, -50%);
}
}

Answer 1

There is a fundamental difference between SCSS and CSS variables.
SCSS variables ($xxx) are imperative, meaning that values overwritten in a different scope remain saved in the reference.
CSS variables (var(--xxx, <potential-fallback-value>)) are declarative, which means their value stays the same for all calls, but a selector may hold a changed value, which will only stay as long as that selector matches.
Here's a comparison I made. SCSS variables:
Refs:
$x: 1
$y: 2
$z: 3
...
CSS vars:
Refs:
--x:
':root': 1
.some-class: 2
--y:
':root': 2
.some-class: 3
...
So, here you should be using CSS var()s, not SCSS $variables. The former one also has good browser support, so you shouldn't worry.

Answer 2

Not sure how to override the variable correctly... but here's the solution I went with:
&.tooltip-large::after {
border-width: 12px;
}