CODEWITHSUNDEEP
csssass
Reacting
Reacting

Reputation: 6123

Why is this not workin on SCSS

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?

Upvotes: 0

Views: 176

Answers (3)

karthick
karthick

Reputation: 12176

&- will prepend the parent selector to the rule.

So,

  1. &-wrapper will be .btn-wrapper
  2. &-container will be .btn-wrapper-container
  3. &-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;
          }
        }
      }
    }

Upvotes: 3

Devin
Devin

Reputation: 59

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.

Upvotes: 1

Paweł
Paweł

Reputation: 4516

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

Upvotes: 0

Related Questions