Why is this not workin on SCSS

Question

I am trying to make this to work and I don't why isn't working since this is one of the idiosyncrasies of SCSS:

This is the HTML:

<div class="btn btn-wrapper">
   <div class="btn-container mob-only">
      <a class="btn btn-red" href="#" target="_blank">
         <span class="mob-only">Schedule Appointment</span>
      </a>
   </div>
</div>

SCSS:

.btn {
    &-wrapper {
        width: 100%;
        // border: 1px solid red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -7vw 0px;
        &-container {
            &-red {
                color: white;
                background: $red;
                padding: 10px;
                width: 85%;
                border-radius: 0;
                margin: 10px;
                font-size: 7vw;
            }
        }
    }
}

What am I doing wrong?

&-red will get compile to .btn-wrapper-container-red , so it wont work — karthick, Jun 16 '17 at 22:42

karthick · Accepted Answer · 2017-06-16T23:07:28.410

&- will prepend the parent selector to the rule.

So,

&-wrapper will be .btn-wrapper
&-container will be .btn-wrapper-container
&-red will be .btn-wrapper-container-red

You can solve it by reducing the nesting, but this wont help if you want to select only .btn-red inside .btn-container.

For selecting the most relevant element and having the same nesting structure like you have, you can create a variable name in the parent selector and assign that in the nesting. I have added both the approaches below.

Approach 1

 .btn {
      &-wrapper {
        width: 100%;
        // border: 1px solid red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -7vw 0px;
      }
      &-red {
         color: white;
         background: $red;
         padding: 10px;
         width: 85%;
         border-radius: 0;
         margin: 10px;
         font-size: 7vw;
      }
    }

Approach 2

 .btn {
      $root: &;
      #{$root}-wrapper {
        width: 100%;
        // border: 1px solid red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -7vw 0px;
        #{$root}-container {
          #{$root}-red {
            color: white;
            background: 'red';
            padding: 10px;
            width: 85%;
            border-radius: 0;
            margin: 10px;
            font-size: 7vw;
          }
        }
      }
    }

score 1 · Answer 2 · answered Jun 16 '17 at 22:56

All your selectors are nested and are extending each other by name. In your case you are generating the three classes .btn, .btn-wrapper and .btn-wrapper-container-red.

You are probably looking to do:

.btn {
  &-wrapper { ... }
  &-container { ... }
  &-red { ... }
}

This will generate the four classes .btn, .btn-wrapper, .btn-container and .btn-red.

Paweł · Answer 3 · 2017-06-16T22:50:48.423

0

at first sight, you nested selectors in a wrong way, your code generates styles for btn-wrapper, btn-wrapper-container, btn-wrapper-container-red, this will generate btn-wrapper btn-container btn-red selectors:

html:

<div class="btn btn-wrapper">
   <div class="btn-container mob-only">
      <a class="btn btn-container-red" href="#" target="_blank">
         <span class="mob-only">Schedule Appointment</span>
      </a>
   </div>
</div>

scss:

.btn {
  &-wrapper {
    width: 100%;
    // border: 1px solid red;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: -7vw 0px;
  }
  &-container {
     &-red {
        color: white;
        background: $red;
        padding: 10px;
        width: 85%;
        border-radius: 0;
        margin: 10px;
        font-size: 7vw;
     }
  }
}

edited Jun 16 '17 at 22:50

answered Jun 16 '17 at 22:45

Paweł

4,238
4
21
40

This `&-container, &-red {...}` will assign the rules to both elements and I don't want that. `-container` will have different rules, and `-red` is its child. – Reacting Jun 16 '17 at 22:48
so change `btn-red` in your html into `btn-container-red` and put `&-red {... }` into `&-container {...}` scope (i've edited post) – Paweł Jun 16 '17 at 22:49

Why is this not workin on SCSS

3 Answers3