Improve heading SASS mixin

Created on 1 October 2023, about 1 year ago
Updated 3 October 2023, about 1 year ago

Problem/Motivation

The mixin is this one

@mixin heading($font-size) {
  margin-top: $headings-margin-top-factor * $font-size;
  margin-bottom: $headings-margin-bottom-factor * $font-size;
  line-height: $headings-line-height * $font-size;
  font-size: $font-size;
}

Two things can be improved here:

1. For the line-height, there is no point of multiplying $headings-line-height with $font-size, browser is already doing this if we just specify `line-height: $headings-line-height`. As additional benefit if we change font size for any reason with additional custom CSS rules there is no need to recalculate line-height, again browser will do that.

2. Introducing a new SASS variable $headings-letter-spacing that is defining heading letter-spacing would be nice. Often this headings have a bit more exotic fonts which require adjusting letter-spacing. Currently we need to do it for all heading rules when needed manually. Adding this in this mixin would simplify this a lot.

Feature request
Status

Fixed

Version

1.0

Component

BS Base

Created by

🇷🇸Serbia pivica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024