[Sass] Level 4: Extend -- Ex

Better use @extend with % placeholder.

Extend is useful when you want to reuse some of you class. Always use % placeholder.

EXTEND I

It looks like .blueprint and .surveyor have a number of matching properties. Add an @extendto .surveyor to make this section more efficient.

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.surveyor {
  background: blue;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 15px;
  padding: 10px;
}

Answer:

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.surveyor {
    @extend .blueprint;
  color: #fff;
}

NESTED EXTEND

The developers are using .notice in some places of the application, .error in others, and are unable to only use one or the other. Extend the .notice styles into an .error declaration.

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
  &.alert {
    background: red;
    box-shadow: 0 0 10px red;
  }
  a {
    color: #222;
    &:hover {
      color: #313131;
    }
  }
}

Answer:

.notice {
  background: yellow;
  border: 5px solid #000;
  padding: 20px;
  &.alert {
    background: red;
    box-shadow: 0 0 10px red;
  }
  a {
    color: #222;
    &:hover {
      color: #313131;
    }
  }
}
.error {
  @extend .notice;
}

EXTEND III

Some of the CSS copied over originally contains already-combined selectors. Refactor the segment below to make use of extend on .socket instead, in case we need to add elements later.

.socket,
.wrench,
.bolt {
  border-radius: 50%;
  padding: 15px;
  width: 30px;
}
.wrench {
  width: 100px;
}
.bolt {
  padding: 14px;
}

Answer:

.socket {
  border-radius: 50%;
  padding: 15px;
  width: 30px;
}
.wrench {
  @extend .socket;
  width: 100px;
}
.bolt {
  @extend .socket;
  padding: 14px;
}

PLACEHOLDER SELECTOR I

.group (commonly referred to as clearfix) is used throughout our application for clearing floats. To keep use of this relegated to our styles rather than allowing .group to be added as a class, convert .group over to a placeholder selector and update the extend inside .factory.

.group {
  zoom: 1;
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

.factory {
  @extend .group;
  background: #fff;
}

Answer:

%group {
  zoom: 1;
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

.factory {
  @extend %group;
  background: #fff;
}

PLACEHOLDER SELECTOR II

Whoops - we've discovered an alteration to .blueprint later in our stylesheet, and extending.blueprint with .surveyor is creating extra selectors in .factory that aren't needed. Create a placeholder selector called container to hold the shared properties and extend it with.blueprint and .surveyor to remove the extra .factory .surveyor selector.

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.surveyor {
  @extend .blueprint;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

Answer:

%container{ 
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.blueprint {
    @extend %container;
}
.surveyor {
  @extend %container;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}