lvl99

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

  .-modal-init-default(@rules: {}) {
    .-toggleable-init-default(@rules);
  }
}

lvl99

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

lvl99

// 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();

lvl99

// Uses the namespace to build custom state classes
@-toggleable-ns-class-show: ~".ui-@{ns}-show";
@-toggleable-ns-class-hide: ~".ui-@{ns}-hide";

lvl99

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

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

lvl99

.ui-lvl99-toggleable(@ns: ~"lvl99-toggleable"; @-toggleable-display: ~"block") {
  // … magic beans follows ...
}

lvl99

// Import and apply the Toggleable Mixin Class to a specific class
.toggleable {
  // Imports the mixin and its related mixins and variables
  .ui-lvl99-toggleable(@ns: ~"toggleable");
  // Initialise the default since we have no other modifications from the normal
  .-toggleable-init-default();
}

// Let's do a parametric modification since spans should be displayed using `inline` or `inline-block`
span.toggleable {

lvl99

// 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: {}) {

lvl99

<!-- Modal component HTML structure with modal and toggleable classes applied -->
<!-- This is usually the most basic way to combine multiple classes on an element -->
<div id=”example-a” class=”modal toggleable”>
  <!-- … oh la la, magic~~~ … -->
</div>

lvl99

class Modal extends Toggleable {
  // … magic goes here …
}