Sass with BEM, inherit selector

Question

I'm using Sass 3.4.1 and BEM so my scss is:

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
}

and I want every time hover over .photo-of-the-day something happen with title, that's pretty common so usually in css:

.photo-of-the-day:hover .photo-of-the-day--title{
    font-size:12px
}

the thing is using BEM this is the only way I found and looks kinda ugly

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
    &:hover{
        background: red;
        /* this is ugly */
        .photo-of-the-day--title{
            text-decoration: underline;
        }
    }
}

so I was wondering if I can inherit .photo-of-the-day selector and use it inside the hover to avoid copy again the full selector.

Ideally would be something like:

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

Or something close to comeback to the parent selector for BEM. Is it possible?

I made mixin for this. Here my another answer: https://stackoverflow.com/questions/9293891/sass-css-target-parent-class-from-child/49426503#49426503 — imkremen, Mar 22 '18 at 12:44

cimmanon · Accepted Answer · 2014-10-10T16:56:47.167

8

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

edited Oct 10 '14 at 16:56

answered Oct 10 '14 at 16:19

cimmanon

67,211
17
165
171

score 6 · Answer 2 · answered Oct 10 '14 at 16:20

6

You can use this syntax:

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

answered Oct 10 '14 at 16:20

Paleo

21,831
4
65
76

1

the problem with this is if I do that solution I lost the hover scope so can not do: ``&:hover{ cursor: pointer; background: red; ... .photo-of-the-day--title{ text-decoration: underline; } }`` – alexrqs Oct 10 '14 at 16:50
@alexrqs And? There's no rule that says you have to nest everything. A solution that has nesting is actually more verbose. – cimmanon Oct 10 '14 at 16:59
@alexrqs You have to use `&:hover { /* ... */ }` independently of the `&:hover &--title`. – Paleo Oct 10 '14 at 18:45
@alexrqs - you are absolutely right. while this works, it would mean repeating the `:hover` selector how many times needed, loosing any DRY aspects SASS gives you. very sad. – vsync Jun 07 '15 at 13:32

Sass with BEM, inherit selector

2 Answers2

Linked