Object-oriented inspired composable LESS mixins. View the article on the blog: http://blog.lvl99.com

12-Example-instantiating-Modal-composable-mixin-into-component-class.less

.modal {
  .ui-lvl99-modal(@ns: ‘modal’);
  .-modal-init-default({
    background: red;
    padding: 40px;
  });
}

// ... would output the following CSS
.modal {
  display: none;
  overflow: hidden;
  height: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  background: red;
  padding: 40px;
}

.modal.ui-modal-show {
  display: block;
  overflow: auto;
  height: 100%;
  pointer-events: auto;
}

.modal.ui-modal-hide {
  display: none;
  overflow: hidden;
  height: 0;
}