LESS Component Styling

Anatomy of a Production-Ready LESS Component

A well-built LESS component typically layers several features together: design tokens for consistent values, a guarded mixin for variant logic (primary, success, danger), BEM naming for structure, and color functions for derived hover and border states.

Structuring a component this way means adding a new variant later is a matter of adding one guarded case, not duplicating an entire block of CSS.

.btn {
  display: inline-flex;
  align-items: center;
  gap: @spacing-1;
  padding: @spacing-2 @spacing-3;
  border-radius: @radius-md;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;

  &--primary { .btn-variant(@color-primary); }
  &--success { .btn-variant(@color-success); }
  &--danger  { .btn-variant(@color-danger); }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

Each modifier delegates its actual color logic to a shared .btn-variant() mixin, avoiding duplicated declarations.

The Shared Variant Mixin

.btn-variant(@bg) {
  background: @bg;
  border-color: darken(@bg, 8%);
  color: contrast(@bg, #111, #fff);

  &:hover {
    background: darken(@bg, 6%);
  }
}

• .btn-variant(@bg) computes every derived color from a single base color argument.
• contrast() automatically picks readable light or dark text based on the background's lightness.
• Each BEM modifier (&--primary) calls the shared mixin with its own token color.
• New variants require only one new modifier line, not a duplicated block of declarations.

Component Styling Building Blocks

Every LESS feature used together in this component, and what it contributes.

Adding a New Variant in One Line

Because every variant delegates its color logic to .btn-variant(), adding a brand-new variant, like a warning button, requires only a single new modifier line, not a duplicated block of hover, border, and text color declarations.

.btn {
  // ...existing modifiers...
  &--warning { .btn-variant(@color-warning); }
}

Adding Size Variants Alongside Color Variants

Size variants (small, medium, large) are independent of color variants and combine naturally when each is its own BEM modifier, letting a consumer mix &--primary with &--sm freely.

.btn {
  &--sm { padding: @spacing-1 @spacing-2; font-size: 0.875rem; }
  &--lg { padding: @spacing-3 @spacing-4; font-size: 1.125rem; }
}

Usage: class="btn btn--primary btn--lg" combines a color variant with a size variant.

Verifying Component Output

Before shipping a component like this, it's worth compiling it in isolation and inspecting the output CSS to confirm every guard, mixin call, and color function resolved to the values you expected.

• Compile the component file alone and review the generated CSS for each variant.
• Check computed hover and border colors visually against your design tool's specification.
• Confirm contrast() selected readable text color for every background variant, especially lighter ones.

Common Mistakes

• Duplicating hover, border, and text color declarations for every new variant instead of delegating to a shared mixin.
• Hardcoding variant colors directly instead of referencing design tokens, breaking consistency with the rest of the system.
• Forgetting to test contrast()'s text color choice against lighter background variants, where readability is easiest to get wrong.
• Mixing color and size variant logic into a single combined modifier instead of two independently composable ones.

Key Takeaways

• A production-ready LESS component combines tokens, guarded/parametric mixins, color functions, and BEM naming.
• Delegating variant color logic to a shared mixin means new variants require minimal duplicated code.
• Size and color variants should be independent, composable BEM modifiers.
• Always verify compiled output for a component, especially derived colors, before shipping it.