CODEWITHSUNDEEP
csssassnestedselectorextend
l3lue
l3lue

Reputation: 541

How to remove pseudo selector in SCSS?

In SCSS, I used @extend for merging 2 selectors in 1 line but the pseudo selector(:before) is created inside of #bar like this:

#foo {
  position: relative;
  &:before {
    width: 200px;
  }
}
#bar {
  @extend #foo;
}

Output:

#foo, #bar {
  position: relative; 
}
#foo:before, #bar:before {
  width: 200px; 
}

I want to make like this by using SCSS:

#foo, #bar {
  position: relative; 
}
#foo:before {
  width: 200px; 
}
/* I want to remove #bar:before */

Is there any ways to remove unwanted pseudo selector by creating @extend?

Upvotes: 2

Views: 283

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

You can placeholder selector(%) to declare your shared properties to #foo and #bar

See example

Use as below:

%shared {
  position: relative;
}
#foo{
   @extend %shared;
    &:before {
    width: 200px;
    content:'';
  }
}
#bar {
    @extend %shared;
}

Upvotes: 4

Related Questions