# The CSS feature "+\[variableName\]+"

**URL:** <https://forum.codewithmosh.com/t/the-css-feature-variablename/18169>\
**Category:** Uncategorized\
**Created:** [February 10, 2023, 10:46am UTC](https://forum.codewithmosh.com/t/the-css-feature-variablename/18169 "2023-02-10T10:46:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marinheiro](https://avatars.discourse-cdn.com/v4/letter/m/90db22/32.png) [@Marinheiro](https://forum.codewithmosh.com/u/Marinheiro)\
**Post date:** [February 10, 2023, 10:46am UTC](https://forum.codewithmosh.com/t/the-css-feature-variablename/18169/1 "2023-02-10T10:46:39Z")

</div>

I was looking into how to make a parralax scroll effect using Javascript, and i came across a syntax that I haven’t come across before.

Instead of typing in a number value and unit on any css rule, you can substitute with the number value of a variable by typing in the syntax ‘“+[variableName]+”’. This opens up for CSS that change at runtime.

Does anyone know where can I find information on how to use this powerfull feature, and what the drawbacks might be?

---

<div class="post-metadata">

**Author:** ![deeess](https://avatars.discourse-cdn.com/v4/letter/d/90ced4/32.png) [@deeess](https://forum.codewithmosh.com/u/deeess)\
**Post date:** [February 10, 2023, 4:14pm UTC](https://forum.codewithmosh.com/t/the-css-feature-variablename/18169/2 "2023-02-10T16:14:00Z")

</div>

Can you provide an example of a use case so that I may understand what you are trying to achieve and what this would solve?

Thanks

---

<div class="post-metadata">

**Author:** ![Marinheiro](https://avatars.discourse-cdn.com/v4/letter/m/90db22/32.png) [@Marinheiro](https://forum.codewithmosh.com/u/Marinheiro)\
**Post date:** [February 10, 2023, 6:13pm UTC](https://forum.codewithmosh.com/t/the-css-feature-variablename/18169/3 "2023-02-10T18:13:20Z")

</div>

Hey Deeess

Yes!  
I found the tutorial video i was following. See this [timestamp](https://youtu.be/Dxm6EwvQIl8?t=764) youtube link. He is using those plus’es. I think i can get it to work, but my goal is just to develop a deeper understanding of this syntax, so i can find out when it is good practice to use it, and when to look for other approaches. For example, it might not work in all browsers, or it might create jaggy animations, or tend to create issues with other functions etc… I haven’t come across it before, so i guess it is rarely used, but then again i am still new to coding.

---

<div class="post-metadata">

**Author:** ![deeess](https://avatars.discourse-cdn.com/v4/letter/d/90ced4/32.png) [@deeess](https://forum.codewithmosh.com/u/deeess)\
**Post date:** [February 12, 2023, 6:34pm UTC](https://forum.codewithmosh.com/t/the-css-feature-variablename/18169/4 "2023-02-12T18:34:00Z")

</div>

That is just joining strings in JS using +

![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/5/5dc8988249573a797214fef6ef21106b25ffbbf9.png)

(With es6 you can do that using string interpolation)

---

<div class="post-metadata">

**Author:** ![Marinheiro](https://avatars.discourse-cdn.com/v4/letter/m/90db22/32.png) [@Marinheiro](https://forum.codewithmosh.com/u/Marinheiro)\
**Post date:** [February 15, 2023, 8:30am UTC](https://forum.codewithmosh.com/t/the-css-feature-variablename/18169/5 "2023-02-15T08:30:30Z")

</div>

> [@deeess](#):
>
> joining strings in JS using +

Ahaa! Now i get it!  
So back in the days people used string concatentation with the plus operator to change strings. But after ES6, it is concidered a better practice to use the new syntax for string interpolation; _${variableName}_, as it is easier to read and uses less code. (read [source](https://dmitripavlutin.com/string-interpolation-in-javascript/), paragraph 4.1).

I was beginning to think that the first plus was converting the variable to a number, and the second one was adding it to the unit, but it turns out that wasn’t the case.

Thank you for making me understand.