bradxr
8/7/2018 - 4:33 PM

Extend One Set of CSS Styles to Another Element

@extend - makes it easy to borrow the CSS rules from one element and build upon them in another

snippet.scss
content_copyfile_download
// below block of CSS rules style a .panel class. It has a background-color, height, and border
.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}


// now you want another panel called big panel, with the same base properties but also needs a width
// and font-size
.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}