CODEWITHSUNDEEP
htmlcsssasscss-selectors
Nico Asseo
Nico Asseo

Reputation: 65

Ampersand and nesting SASS

I'd just like to know the difference, when using Sass, between simple nesting

p{
   color: white;

    .text{
         text-decoration: underline;
     }

}

and nesting using an Ampersand '&'

p{
    color: white;

    &.text{
          text-decoration: underline;
     }

}

Upvotes: 0

Views: 343

Answers (3)

Techmasco Solutions
Techmasco Solutions

Reputation: 11

As per your questions:

1.

p {
    color: white;
    .text {
    text-decoration: underline;
}

It indicates: CSS properties output to all the .text class selector inside p tag. Like p .text{}

2.

p{
    color: white;
    
    &.text{
        text-decoration: underline;
    }
}

It indicates: When you use & with .text selector the CSS properties output to all the .text class selectors within p tag. Like p.text{}

Good luck buddy!

Upvotes: 1

Justiniscoding
Justiniscoding

Reputation: 731

The first example without the ampersand will select every child of a p element with the class text. The example with the ampersand will select every p element with the class text. With your code, using the first selector will make every p element with a child that has the text class have an underline. However, the second selector will make every p element with the text class underlined.

Upvotes: 2

Johannes
Johannes

Reputation: 67774

In the first one the .text has to be a child element of p (in CSS that would be p .text {...}) , in the second one the .text rule applies to all p tags that have the text class (i.e. p.text {...})

Upvotes: 0

Related Questions