Sass nesting question, please

Joined
Feb 15, 2021
Messages
84
Reaction score
0
Hello,

Code:
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
Code:
&
doing for me?

this is new, so please take it slow for me :)
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
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.

Sass:
$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;
    }
  }
}
CSS:
.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;
}

Sass:
$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;
    }
  }
}
Sass:
$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;
    }
  }
}
CSS:
.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;
}
 
Last edited:
Joined
Feb 15, 2021
Messages
84
Reaction score
0
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
Code:
&
concept

are all uses of
Code:
&
psuedo selectors?



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

i appreciate your time and trouble!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,717
Messages
2,569,382
Members
44,701
Latest member
OurCBDLifeSupplement

Latest Threads

Top