SCSS ampersand not working when trying to make modifiers for class names

Asked Jan 26 '21 at 21:43

Active Jan 26 '21 at 21:47

Viewed 24 times

I'm not sure why this is working.. if I put the following it works fine:

.popup--bookmark {
  background: white;
  border-radius: 10px;
  padding: 15px 35px 15px 15px;
  position: absolute;
  z-index: 999;
  left: 220px;
  top: 11px;
}

but if i try to break it up for BEM purposes like so, it doesn't work:

.popup {
  background: white;
  border-radius: 10px;
  padding: 15px 35px 15px 15px;
  position: absolute;
  z-index: 999;

  &--bookmark {
    left: 220px;
    top: 11px;
  }
}

Usage is straight forward like so:

<div className="popup--bookmark">

What am I doing wrong? According to this article it should work. Quote from the article:

// Touching the ampersand works well with modifier classes.

.btn {
  &-primary {}
  &-secondary {}
}
Compiled CSS:

.btn-primary {}
.btn-secondary {}

edited Jan 26 '21 at 21:47

asked Jan 26 '21 at 21:43

user1189352

3,628
12
50
90

1

both code are different, the second one will apply only top/left to your element – Temani Afif Jan 26 '21 at 21:44
@TemaniAfif i'm sorry can you clarify what you mean please? I really want the second code to apply to the "popup--bookmark" class, what am i doing wrong? – user1189352 Jan 26 '21 at 21:47
the SASS code you wrote will not generate the the CSS code you are showing – Temani Afif Jan 26 '21 at 21:51
As Temani says, what you have will give the CSS `.popup--bookmark { left: 220px, top: 11px }` It doesn't inherit the parent styles. – disinfor Jan 26 '21 at 21:52
1

"It doesn't inherit the parent styles" ah okay that makes sense then... thank you both – user1189352 Jan 26 '21 at 21:53
@user1189352 you want to use `@extend` for your case. – disinfor Jan 26 '21 at 21:56

SCSS ampersand not working when trying to make modifiers for class names

0 Answers0