CODEWITHSUNDEEP
inheritancesass
Spencer Mark
Spencer Mark

Reputation: 5311

Scss : Selector Inheritance : removing one declaration

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

Example would be:

#logo {
  float: left;
  width: 75px;
  height: 28px;
  background: url("/images/logo.png") no-repeat 0 0;
  a {
    @extend #logo;
    background: none;
    display: block;
    text-decoration: none;
    text-indent: -999999em;
    overflow: hidden;
  }
}

Rather than using

background: none;

Upvotes: 1

Views: 1997

Answers (1)

cimmanon
cimmanon

Reputation: 68319

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;
}

Upvotes: 3

Related Questions