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

06-Examples-showing-how-composable-mixins-are-instantiated-and-extended.less

// Modal component
.modal {
  .ui-lvl99-toggleable(@ns: ~“modal”);
  .-toggleable-init-default();
}

// ... would generate the following CSS
.modal.ui-modal-show {
  display: block;
}
.modal.ui-modal-hide {
  display: none;
}

// Spinner component (could be used inline with text or in a button)
.spinner {
  .ui-lvl99-toggleable(@ns: ~“spinner”; @-toggleable-display: ~”block”);
  .-toggleable-init-default();
}

// ... would generate the following CSS
.spinner.ui-spinner-show {
  display: inline-block;
}
.spinner.ui-spinner-hide {
  display: none;
}