Sass Extend and Parent Selector

Is it possible to include the parent properties in an extended Sass class?

What you are looking for is the @extend directive. @extend allows you share a set of CSS properties from one selector to another. This means that you would only need to use the container-featured class.

Example

.container {
  margin: 10%;
  background: #eee;

  &-featured {
    @extend .container;
    border: 2px solid #999;
  }
}

compiles to:

.container,
.container-featured {
    margin: 10%;
    background: #eee;
}

.container-featured {
    border: 2px solid #999;
}

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;

How do I directly extend an SCSS parent selector?

I've found that it works when I move the .img selector next to the :first-child selector and change the selector to :first-selector, :first-selector .img.

Here is the working code (NOTE: line 3):

article.featured {
  h4 { margin-bottom: 20px }

  :first-child, :first-child .img {
    height: 100%;
    padding-top: 0;
    padding-left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  :last-child {
    padding-top: 0;
    padding-right: 0
  }
}

Which compiles to:

article.featured h4 {
  margin-bottom: 20px;
}

article.featured :first-child, article.featured :first-child .img {
  height: 100%;
  padding-top: 0;
  padding-left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

article.featured :last-child {
  padding-top: 0;
  padding-right: 0;
}

Sass fails to @extend selectors created with the parent selector

Extends only work on exact matches. When you write this:

%placeholder {
  color: silver;
  #{&}-gold {
    color: gold;
  }
}

What you've really created is this:

%placeholder {
  color: silver;
}

%placeholder %placeholder-gold {
  color: gold;
}

So when you write this:

.myclass {
  @extend %placeholder !optional;
}

It will only extend the %placeholder selector and not %placeholder-gold selector. To get the behavior you're looking for, you have to extend each placeholder selector individually:

%placeholder {
  color: silver;
  @at-root #{&}-gold {
    color: gold;
  }
}

@mixin placeholder {
    & {
        @extend %placeholder;
        @at-root #{&}-gold {
            @extend %placeholder-gold;
        }
    }
}

.myclass {
  @include placeholder;
}

Output:

.myclass {
  color: silver;
}
.myclass-gold {
  color: gold;
}

Why people use '@extend' in SCSS?

It helps you write DRY code quickly. @extend can be very useful when used properly.

It allows a selector to extend the styles of another selector, essentially providing a form of sub-classing. @extend works by combining selectors into a single comma-separated selector.

I.e. -

.A {
    font-size: 1rem;
    color:red;
}

.a{
    @extend .A;
    line-height: normal;
   }

Which outputs:

.A,.a {
   font-size: 1rem;
    color:red;
}

.a{
   line-height: normal;
}