Sass with Bem, Inherit Selector

Sass with BEM, inherit selector

If you insist on nesting everything, the best you can do is this:

.photo-of-the-day {
    $root: &;
    &--title{
        font-size: 16px;
    }
    &:hover{
        #{$root}--title {
            text-decoration: underline;
        }
    }
}

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

How to select grand parent on SCSS inside BEM modifier?

Finally, i thought a lot and found a way around not sure why there is not a way around to select grandparent on SCSS.

Here is how i am doing that

.icon-box {
  &__title {
    color: black;
  }

  &--red {
    .icon-box {
      &__title {
        color: red;
     }
  }
}  

Hope someone will find it usefull

Sass BEM modifiers and children

You can add another ampersand after the modifier to get the desired output:

.mytable {
  font-size: 16px;
  margin: 30px 0;

  &--standard {
    border: 1px solid red;
  }

  &--standard & { //<-- 

    &__row{
      border: 1px solid blue;
    }

    &__some-other-element{}

  }

}

SASS with BEM hover state

.card {
  $this: &;
  
 &__hasFullImage {
   &:hover {
      #{$this}__header {}
    }
}

SCSS target class before :hover - I had same issue

Get ampersand modifier to inherit all properties from parent

I know you've expressed the desire to avoid @extend but this method may allow you to avoid other dev's definitions of .box while still achieving your goal.

You could use placeholders to create your own parent enclosure and extend the placeholder(example of placeholder extension) inheriting only from the placeholder. As a placeholder there is no chance of conflicts with classes from other devs on .box:

%box{    display: inline-block;    width: 100px;    height: 100px;    background: magenta;}.box--selected{    @extend %box;    background: cyan;}

BEM nesting elements and hover effects

You can simply this selector by doing the following:

.list {
  &__item:hover .list__link {
    color: $secondary;
  }
}

---

Related Topics