// import these generic styles from any stylus file with:
// @import '{kctang:mdl-ui}/mdl-ui.styl'

list-card()
  background-color #46B6AC
  background-position center
  background-size cover

list-card-icon()
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  line-height: 18px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.8);

mdl-ui-background-image(url)
  background-image url(url)
  background-position center center
  background-repeat no-repeat
  background-size cover

// import these generic styles from any stylus file with:
// @import '{kctang:mdl-ui}/mdl-ui.styl'

list-card()
  background-color #46B6AC
  background-position center
  background-size cover

list-card-icon()
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  line-height: 18px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.8);

mdl-ui-background-image(url, background-size = cover)
  background-image url(url)
  background-position center center
  background-repeat no-repeat
  background-size background-size

// mixin to define BEM element
e(name)
  &__{name}
    {block}

// mixin to define BEM modifier
m(name)
  &--{name}
    {block}

Add stylus mixins for BEM methodology
Add stylus mixins for BEM methodology
