In SASS, How to refer tag select?

Question

In SASS's class selecter, I want to select parent's sibling.

.bw-textarea {
    height: 150px;
    padding: 10px;
    overflow-y: auto;
    background: white;
    text-align: left;
    width: 100%;
    border: 1px solid #eeeeee;
    font-size: 12px !important;
    color: #666666;

// textarea:disabled & {
//        background: #efefef;
//    }
}

Compiled above sass code,

.bw-textarea textarea:disabled {
    background: #efefef;
}

But I want to show result like this css code...

How to select like this in sass?

textarea.bw-textarea:disabled {
    background: #efefef;
}

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:48

Jinu Kurian · Answer 1 · 2017-03-17T08:43:39.837

3

You gotta use @root in this case. It's pretty simple

This link will give a clear idea about this selector

.bw-textarea {
  @at-root textarea#{&}:disabled{
    background: cyan;
  }
}

This will compile to

textarea.bw-textarea:disabled {
  background: cyan;
}

See this PEN

edited Mar 17 '17 at 08:43

answered Mar 17 '17 at 05:55

Jinu Kurian

9,128
3
27
35

'@at-root' is a really great tool but its overkill for this problem – rayepps Mar 17 '17 at 21:22

score 2 · Answer 2 · edited May 23 '17 at 12:00

2

This is what your looking for:

.bw-textarea {
    height: 150px;
    padding: 10px;
    overflow-y: auto;
    background: white;
    text-align: left;
    width: 100%;
    border: 1px solid #eeeeee;
    font-size: 12px !important;
    color: #666666;

    &:disabled {
         background: #efefef;
    }
}

Check out this SO answer for a lil more idea on the nested pseudo selectors

Sass parent selector and hover?

And of course check the sass docs

https://sass-lang.com/documentation/file.SASS_REFERENCE.html

edited May 23 '17 at 12:00

Community

1
1

answered Mar 17 '17 at 04:57

rayepps

2,072
1
12
22

This is the correct answer for ease of use and writing less code. – Brad Mar 17 '17 at 12:55

In SASS, How to refer tag select?

2 Answers2