Sass Extend Works not like at Sassmeister

62 views Asked by At

I want this output which is delivered when I put my input into Sassmeister:

.brand-kampagne-klick, .brand-kampagne-klick-1 {
  margin-top: 3rem;
}
.brand-kampagne-klick img, .brand-kampagne-klick-1 img {
  width: 100%;
}
.brand-kampagne-klick .beispiel-brand-kampagne, .brand-kampagne-klick-1 .beispiel-brand-kampagne {
  margin-top: 3rem;
}

.brand-kampagne-klick-1 .brand-kampagne-right {
  margin-top: 1rem;
}

But instead my output is:

.brand-kampagne-klick, .brand-kampagne-klick-1 {
  margin-top: 3rem; }

  .brand-kampagne-klick img, .brand-kampagne-klick .brand-kampagne-klick-1 {
    width: 100%; }

  .brand-kampagne-klick .beispiel-brand-kampagne, .brand-kampagne-klick .brand-kampagne-klick-1 {
    margin-top: 3rem; }

.brand-kampagne-klick-1 .brand-kampagne-right {
  margin-top: 1rem; }

Because .brand-kampagne-klick is a pseudo class (I guess declaring with % doesnt work with extend) none of the styles is apllied.

My input is:

.brand-kampagne-klick {
  margin-top: 3rem;
  img {
    width: 100%;
  }
  .beispiel-brand-kampagne {
    margin-top: 3rem;
  }
}

.brand-kampagne-klick-1 {
  @extend .brand-kampagne-klick;
  .brand-kampagne-right {
    margin-top:1rem;
  }
}

Is there a difference between gulp-sass and sassmeister? I use "gulp-sass": "~1.1.0",.

0

There are 0 answers