Including a CSS property inside another, and the significance if '&' in css - html

Question

I was trying to make an interactive hamburger icon and found a tutorial and the code for it on code pen. The problem is the code I found on code pen does not work on my machine, but it is generating results on code pen. Also, in the CSS, I could see some properties placed within other properties which I did not understand. Please see the code below.
HTML:
<div class="nav-icon cross">
<div class="span"></div>
</div>
CSS:
.nav-icon{
height:70px;
width:88px;
position:relative;
.span {
height:6px;
width:55px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:black;
transition:all 0.3s;
&::before,&::after {
height:6px;
width:100%;
background:black;
position:absolute;
content:"";
transition:all 0.3s;
}
&::after {
top:20px;
}
&::before {
top:-20px;
}
}
&.active .span::after {
top:0;
transform:rotate(45deg);
}
&.active .span::before {
top:0;
transform:rotate(-45deg);
}
&.active .span{
background:none;
}
}

Answer 1

Which you posted it's a SCSS and you have to compile it into CSS
You can read about the scss just following link
sass link
.nav-icon {
height: 70px;
width: 88px;
position: relative;
}
.nav-icon .span {
height: 6px;
width: 55px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: black;
transition: all 0.3s;
}
.nav-icon .span::before,
.nav-icon .span::after {
height: 6px;
width: 100%;
background: black;
position: absolute;
content: "";
transition: all 0.3s;
}
.nav-icon .span::after {
top: 20px;
}
.nav-icon .span::before {
top: -20px;
}
.nav-icon.active .span::after {
top: 0;
transform: rotate(45deg);
}
.nav-icon.active .span::before {
top: 0;
transform: rotate(-45deg);
}
.nav-icon.active .span {
background: none;
}
/*# sourceMappingURL=style.css.map */
<div class="nav-icon cross">
<div class="span"></div>
</div>

Answer 2

The ampersand (&) symbol in SASS represents a placeholder for the wrapper of the element you're selecting.
For example, if you have:
.paragraph {
color: blue;
&.active {
color: red;
}
}
is the same as writing
.paragraph {
color: blue;
}
.paragraph.active {
color: red;
}