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

03-Example-Toggleable-composable-mixin-class.less

// Toggleable Mixin Class
// @param @ns Namespaces the custom state classes
// @param @-toggleable-display Sets the display property for showing the toggleable
.ui-lvl99-toggleable(@ns: ~"lvl99-toggleable"; @-toggleable-display: ~"block") {
  // Uses the namespace to build custom state classes
  @-toggleable-ns-class-show: ~".ui-@{ns}-show";
  @-toggleable-ns-class-hide: ~".ui-@{ns}-hide";

  // Class mixin which contain style definitions for `show` state
  .-toggleable-class-show(@rules: {}) {
    display: @-toggleable-display;
    @rules();
  }

  // Class mixin which contains style definitions for `hide` state
  .-toggleable-class-hide(@rules: {}) {
    display: none;
    @rules();
  }

  // Special mixin to import class definition to the `show` state
  .-toggleable-state-show(@rules: {}) {
    &@{-toggleable-ns-class-show} {
      .-toggleable-class-show(@rules);
    }
  }

  // Special mixin to apply any rules to the `hide` state
  .-toggleable-state-hide(@rules: {}) {
    &@{-toggleable-ns-class-hide} {
      .-toggleable-class-hide(@rules);
    }
  }

  // Special mixin to apply any default state styles and rules
  .-toggleable-init-default(@rules: {}) {
    .-toggleable-state-show();
    .-toggleable-state-hide();
    @rules();
  }
}