CODEWITHSUNDEEP
sass
Jake Zeitz
Jake Zeitz

Reputation: 2564

How to override scss variables correctly?

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%);
        }
    }

Upvotes: 0

Views: 633

Answers (2)

Keyacom
Keyacom

Reputation: 94

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.

Upvotes: 1

Jake Zeitz
Jake Zeitz

Reputation: 2564

Not sure how to override the variable correctly... but here's the solution I went with:

&.tooltip-large::after {
    border-width: 12px;
}

Upvotes: 0

Related Questions