CODEWITHSUNDEEP
csssassbem
alex351
alex351

Reputation: 1966

How to nest SCSS with "&" properly to re-use immediate parent (partial) class name?

I want to re-use the class name of the parent and use it on a child element, but it is not working as expected when nesting more than one level. I want to concatenate the child class name only with the immediate parent string and not the whole concatenated parent. I am starting to believe this is not possible.

The SCSS:

.block {
    margin: 2px;

    & &__element {
        margin: 3px;
              
        &-nested {
            margin: 4px;
        }
    }
}

The output:

.block {
  margin: 2px;
}

.block .block__element {
  margin: 3px;
}

.block .block__element-nested {
  margin: 4px;
}

The desired output:

.block {
  margin: 2px;
}

.block .block__element {
  margin: 3px;
}

.block .block__element .block__element-nested {
  margin: 4px;
}

Upvotes: 1

Views: 2524

Answers (5)

alex351
alex351

Reputation: 1966

Apparently this can not be done. As described here as well: https://css-tricks.com/the-sass-ampersand/#what-the-isnt

My intention was for the & to only get replaced with .parent in hopes of compiling to this: .parent .child {} But that doesn’t work. The & is always the fully compiled parent selector.

Upvotes: 1

MaxiGui
MaxiGui

Reputation: 6358

Here 2 solution that are working fine with the use of selector-nest. You will find more information: https://sass-lang.com/documentation/modules/selector#nest

You can test solution here: https://www.sassmeister.com

Method 1:

.block {
    margin: 2px;
      & &__element { 
        margin: 3px;
        
       #{selector-nest('.block__element', '&-nested')} {
            margin: 4px;
        }
    }
}

Method 2:

.block {
    margin: 2px;
    
      #{selector-nest('.block', '&__element')}{
          margin: 3px;
          
          #{selector-nest('.block__element', '&-nested')} {
            margin: 4px;
        }
          
      }
}

Upvotes: 0

Leon Vuković
Leon Vuković

Reputation: 489

In my opinion, your desired output doesn't make sense because it's very confusing on a larger scale. The bottom example is from the docs. The point is not to go deeper than the third level I think...

.block {
  background: red;

  &__element {
    background: red; 

    &--nested {
      background: red;
    }
  }
}

.block {
  background: red;
}
.block__element {
  background: red;
}
.block__element--nested {
  background: red;
}

Upvotes: 0

Becky
Becky

Reputation: 5585

EDIT

To achieve your desired output you may do this.

      .block {
        margin: 2px;

        & &__element {
          margin: 3px;
        }

        & &__element &__element-nested {
          margin: 4px;
        }
      }

EDIT 2

      .block {
          margin: 2px;

          & &__element {
            margin: 3px;

              & .block__element-nested {
                  margin: 4px;
              }  
         }
      }

Output:

       .block {
         margin: 2px;
       }
       .block .block__element {
         margin: 3px;
       }
       .block .block__element .block__element-nested {
         margin: 4px;
       }

Upvotes: 0

Deadpool
Deadpool

Reputation: 8240

Bro, currently nested-& is not supported in Sass. Hopefully, that's the only solution:

.block {
  margin: 2px;

  & &__element {
    margin: 3px;
  }
  
  & &__element &-nested {
    margin: 4px;
  }
}

Upvotes: 1

Related Questions