CODEWITHSUNDEEP
csssassstyles
Mar
Mar

Reputation: 199

SASS - How can I assign two classes the same style except one property?

I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass.

This is the code I currently have:

.class, .otherclass {

    p { font-family:arial;
         &before: 
              @extend .class-one {}
    }

    ~ .extraclass {}
}

Thanks

Upvotes: 0

Views: 4921

Answers (2)

Tushar Kumawat
Tushar Kumawat

Reputation: 661

Please try to look like:

.test{
  $color:#f00;
}
.demo{
  &:extend(.test);
}

Upvotes: 0

Andreew4x4
Andreew4x4

Reputation: 489

To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g 

.class1, .class2, .class3 {
  
  &:before{
    content: 'class';
  }
}

.class2:before {
  content: 'class2';
}

Maybe using :not selector would be helpfull:https://www.w3schools.com/cssref/sel_not.asp

.class1, .class2, .class3 {
  &:before {
    content: 'class'
  }
  &:not(.class1):before{
    content: 'class23'
  }
}

Upvotes: 5

Related Questions