CODEWITHSUNDEEP
vue.jssassattributesvue-component
Isabelle May
Isabelle May

Reputation: 143

How to pass a value from a Vue component attribute into the component's SCSS?

So far I have a tooltip component made of pseudo-classes ::before and :: after, which position themselves around an element depending on which attributes are given to it on the pages it appears in. For example, here's a tooltip which appears on the top-left of an element and grows in the x-direction on a single line:

enter image description here

The tooltip and element appear in their page like so:

<ui-tooltip class="flex-1 lg:mr-16" color="indigo" placement="bottom-left" overflow="grow-x">
  <template #tooltip>Really Long Release Title Potentially Overflowing</template>
    <div class="bg-indigo-5 py-2 rounded text-center">
      <h6>
        Really Long Release Title Potentially Overflowing
      </h6>
    </div>
</ui-tooltip>

And these attributes "placement" and "overflow" are subsequently utilised in the component SCSS like so:

$positions: (top, bottom, left, right, top-left, bottom-left, top-right, bottom-right);

@each $placement in $positions {
  &[placement="#{$placement}"] {
    &::after {
      @extend .tooltip-placement-#{$placement};
    }

    &::before {
      @extend .triangle-placement-#{$placement};
    }
  }
}

And so:

.tooltip-placement-bottom-left, .triangle-placement-bottom-left {
    left: 0%;
    transform-origin: top;
    transform: translate(-50%, 0);
}

.tooltip-placement-bottom-left {
    top: calc(100% + 16px);

    &[overflow="grow-x"] {
        transform-origin: top left;
        transform: translate(-30px, 0);
    }
}

.triangle-placement-bottom-left {
    top: calc(100% - 8px);
    border-width: 12px 10.3923048454px;
    border-bottom-color: var(--tooltip-color);
}

What I would like to do is add a third attribute to this tooltip called "offset", which would allow me to pass a given value e.g. offset="16px", and send that value to the transform properties in tooltip-placement-#{$placement} and triangle-placement-#{$placement} to adjust the translation of the tooltip, like so:

transform: translate(-50%, offsetValue)

but I'm not sure how to apply what I already know into this new methodology, or such an implementation is even possible.

Any clues?

Upvotes: 0

Views: 178

Answers (1)

Evan Lalo
Evan Lalo

Reputation: 1273

You are not able to pass values in to SCSS. What you can do is define a couple different offset variables in SCSS and conditionally apply them by adding or removing classes. The implementation may be a little verbose but it should work.

Hope this helps!

Upvotes: 1

Related Questions