Code Bytes
Share heading styles with CSS or a Sass range helper
Style h1–h6 with a low-specificity CSS selector, or generate a validated heading range with a small non-recursive Sass function.
Start with the simple selector
If all six heading levels share a style, ordinary CSS is the clearest answer. There is no need for a recursive Sass function just to list six elements.
.article :where(h1, h2, h3, h4, h5, h6) {
line-height: 1.15;
text-wrap: balance;
}
The heading names inside :where() add no specificity; .article still does. Keep font sizes and spacing in the existing typography rules, and choose heading levels for document structure, not their default visual size.
If the range is a reusable Sass API
For a library that genuinely needs configurable ranges, build a selector list without recursion:
@use 'sass:list';
@use 'sass:math';
@use 'sass:meta';
@use 'sass:string';
@function headings($from: 1, $to: 6) {
@if meta.type-of($from) != 'number' or meta.type-of($to) != 'number' {
@error 'Heading levels must be numbers.';
}
@if not math.is-unitless($from) or not math.is-unitless($to) {
@error 'Heading levels must be unitless.';
}
@if $from < 1 or $to > 6 or $from > $to
or math.floor($from) != $from or math.floor($to) != $to {
@error 'Use an ascending whole-number range within 1–6.';
}
$selectors: ();
@for $level from $from through $to {
$selectors: list.append($selectors, string.unquote('h#{$level}'), comma);
}
@return $selectors;
}
.article {
#{headings(2, 4)} {
line-height: 1.2;
}
}
That emits one rule for .article h2, .article h3 and .article h4. Invalid ranges fail the Sass build instead of recursing indefinitely or generating nonexistent headings.
Where it belongs
Use Dart Sass and put the helper in your project's existing functions module. Load it with @use and its namespace rather than copying it into every component. For a one-off range, writing h2, h3, h4 remains entirely reasonable.
References: CSS :where, Sass list functions, and Sass @for.
Original version14 August 2014
Kept here for reference and earlier links. The updated guide above is the recommended starting point; older code may depend on retired services or different software versions.
This SASS function provides an easy way to apply styles to all of the 6 standardised HTML headings (h1,h2,h3,h4,h5,h6).
This is mainly to prove the power of Sass, and as a simple mixin, so that you can effectively chop and change stylings for your heading tags.
// Setup the function in your functions or helpers files, wherever you keep these bits.
@function headings($from:1, $to:6) {
@if $from == $to {
@return 'h#{$from}';
} @else {
@return 'h#{$from},' + headings($from+1, $to);
}
}
// Then call it with the rules/styles you want wherever you want (As long as the file/include has access to the above function of course).
#{headings(1,6)} {
color: white;
}
Turns into:
h1, h2, h3, h4, h5, h6 {
color: white;
}
At its default state it will output all h1 to h6 tags, but it's useful if you use it twice, possibly to apply one set of typogrpahy to h1-h3 and another to h4-h6. You would do this by calling the function: #{headings(1,6)} with the number range you need. For example, if you wanted to apply styling to your h2, h3, and h4's you would simply run:
#{headings(2,4)} {
color: white;
}
Keep exploring