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

11-Example-Modal-composable-mixin-class-(complex).less

// Modal Mixin Class
// @param @ns Namespaces the custom state classes
.ui-lvl99-modal(@ns: ~"lvl99-modal") {
  .ui-lvl99-toggleable(@ns);

  // Special mixin to apply any rules to the default class
  // If you feel you wouldn’t need to reuse this class definition in other components, you could
  // just define it in the main body of the mixin class definition
  .-modal-class-default(@rules: {}) {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    @rules();
  }

  // Special mixin to apply any rules to the `show` class
  .-modal-class-show(@rules: {}) {
    // Ensure to inherit the `.-toggleable-class-show` mixin styles
    .-toggleable-class-show({
      overflow: auto;
      height: 100%;
      pointer-events: auto;
      @rules();
    });
  }

  // Special mixin to apply any rules to the `hide` class
  .-modal-class-hide(@rules: {}) {
    // Ensure to inherit the `.-toggleable-class-hide` mixin styles
    .-toggleable-class-hide({
      overflow: hidden;
      height: 0;
      @rules();
    });
  }

  // The default state of this modal will actually inherit from the Toggleable’s `hide` class
  // since modals should be closed by default
  .-modal-state-default(@rules: {}) {
    // Notice I use `.-toggleable-class-hide` here and not `.-toggleable-state-hide` since the state
    // will be using the `&` parent selector, and I don’t need that
    .-toggleable-class-hide({
      .-modal-class-default(@rules);
    });
  }

  // Special mixin to apply any rules to the modal’s `show` state
  .-modal-state-show(@rules: {}) {
    // The Toggleable state uses the `&` parent selector to assign the class to the component
      .-toggleable-state-show({
        .-modal-class-show(@rules);
      });
    }
  
    // Special mixin to apply any rules to the modal’s `hide` state
    .-modal-state-hide(@rules: {}) {
      // The Toggleable state uses the `&` parent selector to assign the class to the component
      .-toggleable-state-hide({
        .-modal-class-hide(@rules);
      });
    }
  
    // Special mixin to apply any default state styles and rules
    .-modal-init-default(@rules: {}) {
      // Initialise the default/show/hide states for the modal
      .-modal-state-default();
      .-modal-state-show();
      .-modal-state-hide();
  
      // Import in detached ruleset to extend this component instance’s style
      @rules();
    }
  }