Why my scss variable wasn't parsed as expected?

Question

This is the output I want to get:

Here is the code: https://jsfiddle.net/t5ewp8ax/

// html
<p class="movie-category">
  <span>Sentimental</span>
  <span>Romantic</span>
  <span>Dramedy</span>
</p>

// scss
.movie-category {
  font-size: 3em;
  display: inline-flex;
  justify-content: space-between;
  background: blue;

  > span:not(:last-child) {
    $distance: 1em;
    $half-distance: $distance / 2;
    margin: 0 $distance 0 0;

    position: relative;
  }
  > span:not(:last-child)::after {
    $size: .2em;
    $half-size: $size / 2;

    content: '';
    position: absolute;
    top: calc(50% - $half-size);
    left: calc(100% + $half-distance - $half-size);

    display: block;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: red;
  }
}

And it seems the lines:

  > span:not(:last-child) {
    $distance: 1em;
    margin: 0 $distance 0 0;
  }

was parsed correctly to margin: 0 1em 0 0;. But

  > span:not(:last-child)::after {
    left: calc(100% + $half-distance - $half-size);
  }

wasn't being parsed to left: calc(100% + .5em - .1em);. Why? What was I doing wrong?

Btw, if any cleaner code can provide that output is very welcome

Abhijit Padhy · Answer 1 · 2019-12-14T21:22:51.693

2

That's because $half-distance used in

left: calc(100% + $half-distance - $half-size); is not available inside ::after block. and sass variables should be wrapped inside #{...} for special functions like calc() To fix the above issue you can probably use,

span:not(:last-child) {
    $distance: 1em;
    $half-distance: $distance / 2;
    ...,

   &::after {
    $size: .2em;
    $half-size: $size / 2;
    left: calc(100% + #{$half-distance - $half-size});
   }
}

edited Dec 14 '19 at 21:22

answered Dec 14 '19 at 20:57

Abhijit Padhy

142
9

1

https://jsfiddle.net/Lgq4ehyb/ Still doesn't work, man, I've tried tweaking around a lot. – Loi Nguyen Huynh Dec 14 '19 at 21:06
Sorry, you should wrap sass variables inside #{} for specials functions. – Abhijit Padhy Dec 14 '19 at 21:19
e.g. `right: calc(#{$osize - $fsize});` – Abhijit Padhy Dec 14 '19 at 21:20
Yes it does solve the problem by putting the sass variable inside an [interpolation](https://sass-lang.com/documentation/interpolation), like described by an article [here](https://tinaja.computer/2017/12/02/sass-interpolation.html). Thank you anyway, any suggestion for getting the code cleaner to get the same output? If no I would probably make yours the accepted answer. – Loi Nguyen Huynh Dec 14 '19 at 21:59

score 1 · Answer 2 · answered Dec 14 '19 at 21:35

1

Is there a particular reason you're using position: absolute and display: block for the pseudo-element? Setting these to position: relative and display: inline-block should help make positioning them a bit more flexible.

answered Dec 14 '19 at 21:35

Jessica Klein

66
4

Nice tip! It works well without `calc()`, as long as the container has enough space to be in one line (which it should always do in my case). Here is the code after applying your tip: https://jsfiddle.net/k4ravhse/. But if for some reason, I **have to force** the element to be in one line, the answer should be using the old method with the fix of interpolation. https://jsfiddle.net/07cbkuns/ – Loi Nguyen Huynh Dec 14 '19 at 22:12

Why my scss variable wasn't parsed as expected?

2 Answers2