teaser-clean.scss

// direct access to variables in the package, 
// because we declared the path in the includePaths array of the sassOptions for the loader
@import 'all_imports';

// which means we have all the colors in the scheme and don't have to do color
// definitions per components!
// which is really bad!!!

.teaser {
  &__base {
    display: inline-block;
    padding: 30px 0;
    // the color comes from the variables in commons!
    border: 1px solid $c-01;
  }
  
  &__outerWrapper {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  
  &__wrapper {
    padding: 0 15px;
  }
  
  &__hl {
    // we will define the headlines with a mixin too, for fonts
    // both the font mixin and the $f-01 definition are in variables,
    // coming from commons, so they're accessible!
    // but since headlines are defined in the title component,
    // the lines below are removed from this file and moved to title.scss!
    /*
    @include font($f-01);
    padding: 10px 0;
    */
  }
  
  &__button {
    // that is all you need to generate the button! 
    // a mixin, with color arguments coming also from the commons
    // but since buttons are defined in the button component,
    // the lines below are removed from this file and moved to button.scss!
    /*
    @include button($c-03, $c-01);
    */
  }
  
  // you can entirely remove the image bit!
  // It's a global constraint for the image component
  /*
  &__img {
    width: 100%;
    height: auto;
  }
  */ 
}