Add Ancestor Selector in Current SASS Nesting

Add ancestor selector in current SASS nesting

.page-home
    .content
        .rows
            .row
                background: blue

                html.no-touch &:hover
                    background: red

        .images
            width: auto

            html.touch &
                max-width: 50px

Will render:

.page-home .content .rows .row {
  background: blue; }
  html.no-touch .page-home .content .rows .row:hover {
    background: red; }
.page-home .content .images {
  width: auto; }
  html.touch .page-home .content .images {
    max-width: 50px; }          

See SASS referencing parent selectors and this post for another example.

How to make parent selector interpolated in the middle of nested selector in sass/scss

Try this:

.box {
    @at-root h3#{&}-title {
        ...
    }
}

I used the sass interpolation #{} to compile expectedly the value of &, and @at-root to prevent the prefix .box (prevent resulting to .box h3.box-title because we want h3.box-title only - without the prefix .box)

Here's the captured result:

Anyway, I don't think this is a good practice to write sass/scss

sass- how to extend a parent selector inside a parent selector

You can store the parent selector in a variable and extend it with interpolation:

.dashboard {
  &-left {
    display: inline-block;
    min-height: 100vh;
    height: 100%;
    width: 280px;
    border-right: 1px solid $gray3;
  }

  &-tabs-buttons {
    $tabsButtonsSelector: &;

    text-align: center;
    width: 100%;
    height: 68px;
    line-height: 68px;

    &-default {
      @extend #{$tabsButtonsSelector};
      color: $gray5;
    }

    &-clicked {
      @extend #{$tabsButtonsSelector};
      color: $gray6;
      background-color: $gray1;
    }
  }
}

If you don't want to use a variable you need to write the selector directly:

@extend .dashboard-tabs-buttons;

Sass add parent selector after current ( selector& )

If you follow my example this will achieve what you are after.

Use the interpolation method #{ } and combine it with the @at-root function

@at-root textarea#{&} {
    display: none;
}

My example here

.contact-block {
    @at-root textarea#{&} {
        display: none;
    }
}

Compiles to

textarea.contact-block {
    display: none;
}

So this is what yours would look like

.form-element {
    &__control {
        @at-root textarea#{&} {
            display: none;
        }
    }
}

Compiling to

textarea.form-element__control {
    display: none;
}

How to prepend a nested class with a selector in SCSS?

I'm not sure I'd advocate for doing this but it is possible.

SCSS has an @at-root directive which allows you to output the content of the block at the root level. You can combine that with the selector.unify() function to build the selector you need.

The example given in the @at-root docs includes a unify-parent mixin which is particularly helpful in your case.

@use "sass:selector";

// Mixin optional - see below
@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.parent-class {
  .class {
    background: lightgreen;
    
    // With the mixin
    @include unify-parent("img") {
      &-img {
        border:blue;
      }
    }

    // Without the mixin (be sure to keep @use though)
    @at-root #{selector.unify(&, img)}-img {
        border: blue;
    }
  }  
}

https://sass-lang.com/documentation/at-rules/at-root

---

Related Topics