linear-gradient syntax unclear-CodePudding

I am trying to understand this pen, but I have difficulties understanding line 44-45 in the SCSS file:

background: linear-gradient(var(--menu-link-active-color) 0 100%) left / 0 repeat;

I looked up many websites, but I couldn't find anything about linear-gradient() with 3 parameters. And also the slash is very unclear. I would be happy to get a hint or an explanation what this is!

CodePudding user response：

Such gradient means a solid color placed at left with a size equal to 0. 0 is equivalent to 0 auto and auto will default to 100%. So a gradient having 0 width and 100% height.

The 3 parameter is a color having 2 color stops. red 0 100% means a gradient having red at 0 and red at 100%. You can also use red 0 0.

Here is an example to better understand. The background will go from 0 to 100%

.box {
 background: 
   linear-gradient(red 0 0) 
   left / 
   0  
   no-repeat;
  height:100px;
  transition:.5s;
}
.box:hover {
  background-size:100%;
}

<div ></div>

An easier syntax would be:

.box {
  background-image: linear-gradient(red, red);
  background-position: left;
  background-size: 0 100%;
  background-repeat: no-repeat;
  height: 100px;
  transition: .5s;
}

.box:hover {
  background-size: 100% 100%;
}

<div ></div>

CodePudding user response：

As it stands this:

background: linear-gradient(var(--menu-link-active-color) 0 100%) left / 0 repeat;

does nothing.

That is because the 3 parameters (actually, it's no-repeat in the codepen but that makes not difference to this linear-gradient) after the background-image (the linear-gradient) are:

position - left - self explanatory and actually corresponding to the default of 0

after the / is size and it's 0 i.e. the element has no size

repeat (or no-repeat)

Now, why bother you ask?

Well, the reason is because of the hover. When the user hovers the size is changed (using a CSS calculation) so that color (shown as an image by the linear gradient) expands all the way across the associated word.

Notice also that the color itself is given by a CSS variable, and that can change for each word or the state.