Scss : Selector Inheritance : removing one declaration

Question

Is there a way to remove the declaration from the extended selector in scss?

Example would be:

#logo {
  float: left;
  width: 75px;
  height: 28px;
         


        

Answer 1

There is no "undo". you'll have to create a separate selector that both selectors extend from:

%logo-common {
  float: left;
  width: 75px;
  height: 28px;
}

#logo {
  @extend %logo-common;
  background: url("/images/logo.png") no-repeat 0 0;
  a {
    @extend %logo-common;
    display: block;
    text-decoration: none;
    text-indent: -999999em;
    overflow: hidden;
  }
}

Compiles to:

#logo, #logo a {
  float: left;
  width: 75px;
  height: 28px;
}

#logo {
  background: url("/images/logo.png") no-repeat 0 0;
}
#logo a {
  display: block;
  text-decoration: none;
  text-indent: -999999em;
  overflow: hidden;
}