Using Less Mixins with Guards for Breakpoint‑Aware Typography

The problem: duplicated media queries

When building a responsive site, you often repeat the same font‑size and line‑height declarations inside separate @media blocks for each breakpoint. Changing a base value means hunting through many selectors, which is error‑prone and makes the stylesheet harder to maintain.

The thesis: a single guarded mixin can generate breakpoint‑specific CSS

Less parametric mixins accept values like font size and line height, and they can be wrapped in a guard that evaluates a breakpoint variable. When the guard is true, the mixin emits its properties inside the media query; when false, it emits nothing. This centralises the typography logic and keeps the source order intact for easy debugging.

Worked example: defining and using the mixin

1. Create a file typography.less with the following content:

@breakpoint-md: 768px;
@breakpoint-lg: 1024px;

.type(@size; @lh; @bp) when (@breakpoint-md >= @bp) {
  @media (min-width: @breakpoint-md) {
    font-size: @size;
    line-height: @lh;
  }
}

.type(@size; @lh; @bp) when (@breakpoint-lg >= @bp) {
  @media (min-width: @breakpoint-lg) {
    font-size: @size;
    line-height: @lh;
  }
}

/* Usage */
h1 {
  .type(2.5rem; 1.2; @breakpoint-md);
  .type(3rem; 1.1; @breakpoint-lg);
}

Explanation:

• @breakpoint-md and @breakpoint-lg are variables that hold the pixel widths for medium and large breakpoints.
• The mixin .type takes three arguments: desired font size, line height, and the breakpoint variable to test against.
• Two overloads of the mixin use guards (when) to emit CSS only when the current breakpoint variable is less than or equal to the argument.
• Inside each guard, a media query wrapper is written exactly as it appears in the source, preserving order.

Compile the Less file with the command line tool (run in your project directory, assuming you have write permission):

lessc typography.less typography.css

Expected output in typography.css:

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;
    line-height: 1.1;
  }
}

To verify, open the compiled CSS in browser dev tools and confirm that the h1 styles apply only within the intended viewport ranges.

Trade‑offs and limitations

While this approach reduces duplication, it introduces a few considerations:

• Variable scope: If a breakpoint variable is misspelled or undefined, the guard fails silently and the mixin produces no output, leading to missing styles. Always define breakpoint variables in a file that is imported before any mixin usage.
• Compilation overhead: Each guarded mixin adds a conditional check during Less compilation. With many breakpoints and numerous mixin calls, compile time can increase noticeably.
• Output size: Because each guard generates its own media query block, the final CSS may contain duplicate wrappers if the same breakpoint is used in many places. This is usually negligible compared to the maintenance benefit, but keep an eye on file size for performance‑critical projects.

Practical way to check the result: after compiling, run grep -c '@media' typography.css to count media query blocks and compare it to the expected number (one per unique breakpoint‑mixin pair). A mismatch indicates a guard that didn’t fire as intended.

Actionable closing

Start by extracting your breakpoint values into a central Less file, then create a guarded typography mixin as shown above. Apply it to any element that needs responsive font sizing, and verify the compiled CSS with a quick grep or browser inspection. This pattern keeps your stylesheet DRY, makes theme updates a single‑point change, and retains the clarity of native media queries for debugging.