Ampersand and nesting SASS-CodePudding

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;
     }

}

CodePudding user response：

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.

CodePudding user response：

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 {...})

CodePudding user response：

As per your questions:

p {

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

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

p{
    color: white;

    &.text{
          text-decoration: underline;
     }

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

Good luck buddy.