Sass nesting question, please

[OBXKH]

Hello,

please see
.navigation {
  list-style:none;
  float:left;


  li {
  display: inline-block;
    margin-left: 30px;
    
    &:first-child {
      margin: 0;
    }
    a:link {
      text-decoration:none;
      text-transform: uppercase;
      color: $color-text-dark;
  }
}
}

tell me, what is the

&

doing for me?

this is new, so please take it slow for me

 

[VBService]

In Sass, the ampersand & is a special character that is used to reference the parent selector in a nested context. It is often used to concatenate or combine selectors.
The & is a powerful feature in Sass, allowing you to generate more concise and maintainable css by referencing and combining selectors in a nested structure.

In the li block, the & is a reference to the .navigation li selector. So, &:first-child is equivalent to .navigation li:first-child. It targets the first li element inside the .navigation element and removes its left margin.

$color-text-dark: black; .navigation { list-style: none; float: left; li { display: inline-block; margin-left: 30px; &:first-child { margin: 0; } a:link { text-decoration: none; text-transform: uppercase; color: $color-text-dark; } } }

.navigation { list-style: none; float: left; } .navigation li { display: inline-block; margin-left: 30px; } .navigation li:first-child { margin: 0; } .navigation li a:link { text-decoration: none; text-transform: uppercase; color: black; }

$color-text-dark: black; .navigation { list-style: none; float: left; li { display: inline-block; margin-left: 30px; &:first-child { margin: 0; } a:link { text-decoration: none; text-transform: uppercase; color: $color-text-dark; } } }

$color-text-dark: black; .navigation { list-style: none; float: left; li { display: inline-block; margin-left: 30px; &:first-child { margin: 0; } & a:link { text-decoration: none; text-transform: uppercase; color: $color-text-dark; } } }

.navigation { list-style: none; float: left; } .navigation li { display: inline-block; margin-left: 30px; } .navigation li:first-child { margin: 0; } .navigation li a:link { text-decoration: none; text-transform: uppercase; color: black; }

 

[OBXKH]

ok, thanks!

looked over your note.

just starting to click!

i hope after really burning it in and re-reading your post over and over i will get it

tell me,

& a:link { text-decoration: none; text-transform: uppercase; color: $color-text-dark;

what is happening here?

i read

The :link selector is used to select unvisited links.

i DO get the nesting concept, but struggle with teh

&

concept

are all uses of

&

psuedo selectors?



please go slow and simple, this is new code for me

i appreciate your time and trouble!