5.1.0 Burger icon mixins support CSS vars

Breaking Change

The burger() and burger-to-cross() mixins now use CSS variables instead of Sass vars:

.icon {
  // Required vars
  --burger-icon-gutter: 6px;
  --burger-icon-stroke-width: 2px;
  --burger-icon-width: 30px;
  // Optional vars, defaults shown
  // --burger-icon-color: currentColor;
  // --burger-icon-radius: 0;
  // --burger-icon-speed: 200ms;
  // --burger-icon-cross-angle: 45deg;
  // --burger-icon-cross-color: currentColor;
  @include burger;

  &.is-active {
    @include burger-to-cross;
  }
}

Docs have been updated https://threespot.github.io/frontline-sass/documentation/#main-mixin-burger

5.0.0 Sass modules

Rewrite to use Sass modules (see https://css-tricks.com/introducing-sass-modules/)

4.1.2 Dependency updates and bugfixes

• Fix error in fs-scale-text() deprecation warning
• Update fs-scale() and fs-scale-clamp() tests to prevent false negatives
• Upgrade NodeJS from 14.15.4 to 20.15.0
• Update sass, postcss-scss, and stylelint

3.11.2 Fix error in deprecation warning

Fixes error in fs-scale-text() deprecation warning

4.1.1 Fix logging errors in helper functions

fs-to-length() and fs-to-number() were copied from this post originally . A year later the author posted an updated version, which I also copied, but I didn’t notice it switched to using Compass for logging instead of the native Sass @warn.

- @warn "Unknown unit `#{$unit}`.";
+ $_: log('Invalid unit `#{$unit}`.');

I think this never caused any issues previously since both functions are rarely used—and when they are it’s unlikely a dev would use them incorrectly. However, the latest version of Sass started complaining about the syntax which led me to realize it used non-Sass code.

4.1.0 Add fs-scale-clamp() function

Adds fs-scale-clamp() function to smoothly scale a value between two breakpoints. Based on https://chrisburnell.com/clamp-calculator/

SCSS

.foo {
  font-size: fs-scale-clamp((375px: 16px, 960px: 20px));
}

Generated CSS

.foo {
  font-size: clamp(1rem, 0.84rem + 0.684vw, 1.25rem);
}

4.0.0 Upgrade to Dart Sass

Now using Dart Sass and math.div for division.

• https://sass-lang.com/documentation/breaking-changes/slash-div
• sass/sass#2565

3.11.0 `fs-scale()` update

In the past, when we wanted to scale a value differently for separate viewport width ranges, it required using the fs-scale() mixin multiple times and applying $initial: false to all subsequent instances. For example:

@include fs-scale(font-size, (360px: 20px, $breakpoint - 1px: 30px));
@include fs-scale(font-size, ($breakpoint: 20px, 1200px: 30px), $initial: false);

When we added map syntax support to fs-scale() in v3.9 it became possible to do this with a single @include like this:

@include fs-scale(font-size, (
  360px: 20px,
  $breakpoint - 1px: 30px,
  $breakpoint: 20px,
  1200px: 30px
));

However, this resulted in the wrong font-size being used when the viewport was exactly $breakpoint - 1px wide, since it created a separate media query from $breakpoint - 1px to $breakpoint—a total of just 1px.

In order to keep the new single @include syntax, we added support for lists so you can now specify separate starting and ending values for a single breakpoint. For example:

@include fs-scale(font-size, (
  360px: 20px,
  $breakpoint: (30px 20px),
  1200px: 30px
));

v3.10.3

Fix: Remove Node engine version requirement from package.json since it’s irrelevant for end users.

3.10.2 `fs-scale()` bugfix

Fixes bug with the fs-scale() mixin that was causing it to output the wrong breakpoint values when using the new map syntax.